0

私はまだ HTML5 に慣れていませんが、非常に奇妙な動作に直面しました。(クローム)

次のコードはクロムで機能します。

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

では、ここでの違いは何ですか？ただし、これら 2 つのケースは Firefox でうまく機能します。IEは試していません。

私が得ることができるどんな助けにも感謝します！

4

1 に答える 1

0

CSS トランジション仕様から:

... 遷移する可能性のある変更を行った後、しばらくして遷移プロパティを変更すると、実装によって動作が異なる可能性があります。これは、変更が一部の実装では同時と見なされ、他の実装とは見なされない可能性があるためです。

別のバージョンでは、ブラウザが への変更の結果を計算することを許可せずに、 を変更してclassNameを更新します。(これは通常、制御をイベント ループに戻したときに発生します。)したがって、ブラウザはまだプロパティの古い値 ( の既定値) で動作している可能性があります。その場合、遅延と期間が であるため、プロパティの変更はアニメーションなしですぐに行われます。transformclassNametransitionall 0s ease 0s0s

于 2012-05-16T14:44:26.210 に答える