JavaScript で割り当てられた CSS トランジションが機能しないのはなぜですか?

JavaScript で割り当てられた CSS トランジションが機能しない

JavaScript を介して CSS3 トランジションをスライドショーに適用すると、指定された正しいスタイルが適用されているにもかかわらず、トランジションが機能しません。この不一致は、CSS トランジションが、トランジションが最初に定義されたときではなく、指定されたプロパティの値が変更されたときにのみトリガーされるために発生します。

この問題を解決するには、次の 3 つの条件が満たされていることを確認してください:

1. プロパティの明示的な定義: 影響を受ける要素には、初期スタイルで明示的に宣言されたプロパティが必要です。
2. 遷移定義: 要素には、必要な遷移が定義されている必要があります。 「transition: opacity 2s;」など。
3. プロパティ値の変更: トランジションを定義した後、新しいプロパティ値を設定して、アニメーションをトリガーします。

この例では、ブラウザーが動的に割り当てられたトランジションを処理する前にプロパティ値の変更 (「不透明度: 1」の設定) が発生したため、トランジションは機能しませんでした。これを修正するには、「target-fadein」クラスを割り当てる前に遅延を導入します。

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

または、「target-fadein-begin」クラスを HTML に直接組み込み、読み込み時に解析できるようにします。

トランジションの JavaScript 割り当て自体ではアニメーションが開始されないことに注意してください。トランジション効果をトリガーするのはプロパティ値の変更です。

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