2

leftスタイルプロパティが定義されtransition、そのプロパティ用のブロックがあるとしましょう。

<div id="caret" class="caret" style="left: 20px"></div>

.caret {
    transition: left 0.3s;
}

さて、私がleft経由して変更すると、$.css()すべてが完全に移行します。

$('#caret').css('left', '100px');

しかし、DOM内のある場所から別の場所にブロックを移動してから変更するleftと、何も遷移せず、すぐに指定された値にジャンプします。

$('#caret').appendTo('#container').css('left', '50px');

ただし、少し待ってからもう一度変更leftすると、遷移が再び戻ります。準備に時間がかかる気がします。

この問題を示すために、簡単なショーケースを作成しました：http: //jsfiddle.net/L624m/2/

それで、なぜそれが起こっているのですか？

4

1 に答える 1

1

問題は、一般的なブラウザーの JavaScript コードでは、最初に DOM に新しい要素を作成させないため、スタイルが実際には新しい要素に直接適用され、遷移がまったく発生しないことです。

要素を追加した後、JavaScript を「中断」し、最初に DOM に新しい要素を認識させる必要があります。通常、これはsetTimeout次のように 0ms 間隔を使用して行われます。

setTimeout(function(){
    caret.css('left', left === '20px' ? '100px' : '20px');
},0);

そのため、ブラウザーは、DOM の変更が実際に行われた後、それ自体もキューに入れられるのではなく、スタイルsetTimeoutの変更を常にキューに入れます。left

于 2013-02-21T16:13:23.983 に答える