如果我在使用chrome上的javascript设置其他内容之前设置正确，HTML5 -webkit-transition不起作用 [英] HTML5 -webkit-transition doesn't work if I set it right before setting something else using javascript on chrome
问题描述
我还是HTML5的新手，但我遇到了一个非常奇怪的行为。 （在Chrome中）
I'm still new to HTML5 but I faced a very strange behavior. (In Chrome)
以下代码适用于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>
但如果我移动该行：
document.getElementById("t47").className += "letter";
到moveIt函数的开头，跨度只是跳转而没有转换
to the beginning of the moveIt function, the span just jumps without transitioning
javascript部分如下：
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>
那么这里有什么区别？这两种情况在firefox上运行良好。我还没试过IE。
So What is the difference here? These two cases work well on firefox though. I haven't tried IE.
我感谢任何帮助！
推荐答案
...在进行可能转换的更改后，在很短的时间内更改任何转换属性会导致实现之间的行为不同，因为更改可能是在某些实现中同时考虑但不是其他实现。
... 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.
在替代版本中，您更改 className 并更新转换，而不允许浏览器计算更改 className 的后果。 （这通常在您将控制权返回到事件循环时发生。）因此，浏览器可能仍在使用过渡属性的旧值（这是默认值所有0缓和0 ）。如果发生这种情况，那么属性更改会立即发生，没有动画，因为延迟和持续时间是 0s 。
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.
这篇关于如果我在使用chrome上的javascript设置其他内容之前设置正确，HTML5 -webkit-transition不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
