CSS トランジションを JavaScript 経由で適用すると失敗するのはなぜですか?

JavaScript を通じて割り当てられた場合の CSS トランジションの修正

JavaScript を通じて CSS3 トランジションを適用しようとすると、指定されたトランジションが失敗する状況が発生する可能性があります正しいスタイルが適用されているにもかかわらず、実行されません。この動作は、特にトランジションがブラウザのインス​​ペクタを通じて直接適用されたときに機能する場合に、不可解になる可能性があります。

根本的な原因

問題を完全に理解するには、 CSS トランジションの仕組み。トランジションを有効にするには、次の 3 つの重要な手順を実行する必要があります。

1. ターゲットの要素には、トランジション プロパティが明示的に定義されている必要があります (例:transition: opacity 2s;)。
2. 要素は次のとおりです。遷移プロパティの初期値が設定されています (例: opacity: 0;)。
3. 遷移プロパティの新しい値を適用する必要があります (例: opacity: 1;)。

提供された例の場合のように、JavaScript がクラスを動的に割り当てる場合、潜在的な問題が発生します。ブラウザはこれらの変更を処理するのに時間が必要であり、ターゲット クラス (例: ".target-fadein") を動的に割り当てると、必要な遅延が提供されない可能性があります。

解決策

この問題を解決するには、ターゲット クラスを割り当てる前に遅延が必要です。これにより、ブラウザーはトランジション プロパティを適用してアニメーションの準備をするのに十分な時間を確保できます。次のコード スニペットは、ターゲット クラスを適用する際の遅延の使用を示しています。

window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);

または、ターゲット クラス「.target-fadein-begin」を HTML に直接追加して、解析されるようにすることもできます。

追加の洞察

要素にトランジションを追加するだけではアニメーションがトリガーされないことを認識することが重要です。実際のアニメーションは、transitioning プロパティの値を変更することによってトリガーされます。これは、インスペクターで初期プロパティ値と新しいプロパティ値を手動で設定することが機能する理由を説明しています。

さらに明確にするために、次のコード スニペットを検討してください。

// Works
document.getElementById('fade1').className += ' fade-in'

// Doesn't work
document.getElementById('fade2').className = 'fadeable'
document.getElementById('fade2').className += ' fade-in'

// Works
document.getElementById('fade3').className = 'fadeable'

window.setTimeout(function() {
  document.getElementById('fade3').className += ' fade-in'
}, 50)

このシナリオでは、最初のブロックが機能します。移行のための 3 つの条件がすべて満たされている。要素には遷移が定義されており、初期不透明度は 0 に設定され、新しい不透明度は 1 に設定されています。遷移クラスが適用される前に初期不透明度値が明示的に定義されていないため、2 番目のブロックは失敗します。 3 番目のブロックが機能するのは、遅延によりブラウザーがトランジションが適用される前に初期値設定を処理できるためです。

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