HTML5 -webkit-transition doesn't work if I set it right before setting something else using javascript on chrome

问题

I'm still new to HTML5 but I faced a very strange behavior. (In Chrome)

The following code works on chrome:

<!DOCTYPE html>

<html>
<head>
    <title>Webkit-transition test</title>
    <script language="javascript" >
        function addSpan()
        {
            document.getElementById("someDiv").innerHTML = "<span id=\"t47\" >A new span!</span>";
            document.getElementById("t47").className += "letter";
        }
        function moveIt()
        {
            document.getElementById("t47").style["MozTransform"] = "translate(10px,40px)";
            document.getElementById("t47").style["WebkitTransform"] = "translate(10px,40px)";
        }
    </script>
    <style>
        .letter{
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            display: inline-block;
            color: red;
        }
    </style>
</head>

<body>
<div id="someDiv"></div>
<span class="letter"  id="aaa">This is an old span</span>
<button onclick='addSpan()'>Add Span</button>
<button onclick='moveIt()'>Move it!</button>
</body>
</html>

However if I move the line:

document.getElementById("t47").className += "letter";

to the beginning of the moveIt function, the span just jumps without transitioning

The javascript part would be like this:

<script language="javascript" >
    function addSpan()
    {
        document.getElementById("someDiv").innerHTML = "<span id=\"t47\" >A new span!</span>";

    }
    function moveIt()
    {
        document.getElementById("t47").className += "letter";
        document.getElementById("t47").style["MozTransform"] = "translate(10px,40px)";
        document.getElementById("t47").style["WebkitTransform"] = "translate(10px,40px)";
    }
</script>

So What is the difference here? These two cases work well on firefox though. I haven't tried IE.

I appreciate any help I can get!

回答1:

From the CSS Transitions specification:

... changing any of the transition properties a small amount of time after making a change that might transition can result in behavior that varies between implementations, since the changes might be considered simultaneous in some implementations but not others.

In your alternative version, you change the className and update the transform without allowing the browser to calculate the consequences of the change to the className. (This typically happens when you return control to the event loop.) Therefore, the browser may still be operating from the old value of the transition property (which is the default value of all 0s ease 0s). If that occurs, then the property change takes place immediately with no animation since the delay and duration are 0s.

来源：https://stackoverflow.com/questions/10619998/html5-webkit-transition-doesnt-work-if-i-set-it-right-before-setting-something

标签

javascript

html5

css3

classname

webkit-transition