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!
From the CSS Transitions specification:
In your alternative version, you change the
classNameand update thetransformwithout allowing the browser to calculate the consequences of the change to theclassName. (This typically happens when you return control to the event loop.) Therefore, the browser may still be operating from the old value of thetransitionproperty (which is the default value ofall 0s ease 0s). If that occurs, then the property change takes place immediately with no animation since the delay and duration are0s.