0

我还是 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>

那么这里有什么区别呢？不过，这两种情况在 Firefox 上运行良好。我没试过IE。

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

4

1 回答 1

0

从CSS 过渡规范：

...在进行可能转换的更改后的一小段时间内更改任何转换属性可能会导致不同实现之间的行为发生变化，因为在某些实现中可能会认为这些更改是同时发生的，但在其他实现中则不会。

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

于 2012-05-16T14:44:26.210 回答