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

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

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

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

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

transStr 値も表示されません。

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