JavaScript を通じて CSS トランジションを適用すると機能しないのはなぜですか?

JavaScript で割り当てた場合に CSS トランジションが適用されない

JavaScript で CSS3 トランジションを適用したにもかかわらず、期待どおりに動作しません。この問題は、トランジション プロパティを含む CSS クラスを動的に割り当てるときに発生します。

トランジションを効果的にトリガーするには、前提条件は次のとおりです。

• プロパティの明示的な定義 (例: opacity: 0;)
• 定義されたトランジション (例、transition: opacity 2s;)
• 新しいプロパティの設定 (例、opacity: 1;)

JavaScript では、問題の原因は次のとおりです。ブラウザの処理時間。最初に正しいスタイルを適用し、少し遅れてからトランジションを担当する CSS クラスを設定する必要があります。この遅延により、ブラウザはトランジションが適用される前に、適用されたスタイルを登録できるようになります。

この遅延を実装するには、window.setTimeout() を使用して、トランジションを含む CSS クラスの追加を延期します:

<code class="js">window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);</code>

または、HTML の読み込み時にトランジションをトリガーするクラス (target-fadein-begin) を HTML に含めます。

<code class="html"><div class="fadeable target-fadein-begin"></div></code>

これらの基準を満たすことで、JavaScript を通じてトリガーされる CSS トランジションが期待どおりに機能し、次のことが可能になります。シームレスなアニメーション

以上がJavaScript を通じて CSS トランジションを適用すると機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。