HTML5 -webkit-transition如果我在Chrome上使用javascript设置其他内容之前设置正确，则不起作用

我仍然是HTML5的新手，但我遇到了一个非常奇怪的行为。（在铬中）

以下代码适用于 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函数的开头，跨度只是跳跃而不过渡

javascript部分是这样的：

<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>

那么这里有什么区别呢？不过，这两种情况在火狐上效果很好。我还没有尝试过IE。

我很感激我能得到的任何帮助！

来自 CSS Transitions 规范：

。在进行可能转换的更改后，在短时间内更改任何转换属性可能会导致行为因实现而异，因为在某些实现中可能认为更改是同时进行的，而在其他实现中则不是。

在您的替代版本中，您可以更改className并更新transform，而不允许浏览器计算更改对className的后果。（这通常在将控制权返回到事件循环时发生。因此，浏览器可能仍在从 transition 属性的旧值（默认值 all 0s ease 0s ）运行。如果发生这种情况，则属性更改将立即发生，没有动画，因为延迟和持续时间0s。

相关内容

最新更新

热门标签：