0ms スリープを省略すると CSS トランジションが中断されるのはなぜですか?

Question

FLIP アニメーションを実装して、正しく理解できているかどうかを確認しようとしています。

このコードペン (いじっているだけなので、悪いコードはご容赦ください) で、sleep をコメントアウトすると、スムーズな移行が機能しなくなります。 div の位置が突然変わります。スリープ時間が0msなのでこれは不思議です。

リーリー

これは私が理解できないイベント ループの魔法ではないかと思います。誰かこれを説明してもらえますか？

Answer 1

この問題に対して通常の JavaScript ソリューションを使用していますが、React は仮想 DOM を使用し、状態が変化したときに DOM 要素が再レンダリングされることを期待しています。したがって、React 状態を利用して仮想 DOM 内の要素の XY 位置を更新することをお勧めしますが、それでも CSS を使用します。

動作デモこちら または、コードはここにあります:

---

リーリー

Answer 2

スリープ中、ブラウザはCSSOMボックスを再計算する時間がかかる場合があります(「実行リフロー」とも呼ばれます)。これがないと、transform ルールは実際には適用されません。 実際、ブラウザは、変更を適用してページ ボックス モデル全体を更新することが本当に必要になるまで待機します。そうすることには非常にコストがかかるためです。

のようなことをすると リーリー

すべての CSSOM には、最新のステータス

"green" が表示されます。残りの2つは捨てられました。

したがって、コード内でイベント ループを実際にループさせない場合、

transStr 値も表示されません。

ただし、0ms

setTimeout に依存するのは問題のある呼び出しであり、その時点でスタイルが再計算されることを保証するものは何もありません。代わりに、手動で再計算を強制することをお勧めします。一部の DOM メソッド/プロパティ はこれを同期的に実行します。ただし、リフローは非常にコストのかかる操作になる可能性があることに注意してください。そのため、必ず時々使用するようにしてください。コード内にこの操作が必要な場所が複数ある場合は、1 回のリフローが実行できるようにすべてを接続してください。 p>

リーリー リーリー リーリー