特定の css スタイルを要素に適用し、その要素にトランジション スタイルを追加し、その要素に別の css スタイルを適用するスクリプトがあります。私がやろうとしているのは、要素にスタイルを即座に適用させ、次の変更をアニメーション化することです。コードは基本的なもので、スタイルを設定し、遷移スタイルを設定し、最終的なスタイルを設定するだけです。しかし、トランジション プロパティをその後まで設定していなくても、最初のプロパティ (トランジションのないもの) にトランジションが適用されていることがわかりました。要素に遷移プロパティがまだ適用されていないことを再確認しました。どうしてこれなの？
また、最初のスタイルの適用とトランジションの間に 50 ミリ秒の遅延を残すと、期待どおりに機能します。
最初のスタイルが適用された後に再レイアウトを強制する必要があり (そのため、トランジションなしで処理されます)、トランジションにつながるスタイルを適用できます。あなたが現在行っている方法では、すべての操作が 1 つの操作にまとめられているため、すべてが移行中です。
再レイアウトを取得する最も簡単な方法は、最初の CSS プロパティsetTimeout(fn, 1)を適用してから、タイマー コールバックで 2 番目のプロパティ セットを適用することです。再レイアウトをトリガーする特定のプロパティを要求することによって再レイアウトを強制する他の方法もあります。それらが頭のてっぺんから外れているプロパティを正確に覚えていません（調査が必要です）。
私はこれを自分で試したことはありませんが、要素のサイズ プロパティを要求する.offsetHeightと、再レイアウトが強制されると思います。ブラウザは、保留中のスタイル変更があり、それらの保留中のスタイル変更がサイズ要求に影響を与える可能性があることを認識しているため、.offsetHeight値を返す前に同期的に再レイアウトを行い、問題を解決します。
やや似た質問と回答: Bootstrap の CSS トランジションの "Force Reflow"