CSS トランジションがレスポンシブ画像スライダーで機能しないのはなぜですか?

CSS の変更中にブラウザーのリフローを強制する

CSS3 トランジションに依存する非 jQuery 応答型イメージ スライダーを作成する際に、次の問題が発生する可能性があります。 CSS プロパティを変更してもアニメーションはトリガーされません。これは、プロパティの変更を簡素化し、アニメーションをスキップするブラウザの最適化によるものです。

これを解決するには、ブラウザのリフローを強制する必要があります。リフローとは、ブラウザが要素のレイアウトを再計算し、スタイルの変更に応じて要素の位置を変更するプロセスです。

コード スニペットでは、最初の CSS を作成する前に、transition プロパティを「0s リニアなし」に設定します。変更してから、「すべて 0.2 秒イーズアウト」に戻します。ただし、このアプローチではリフローがトリガーされないため、アニメーションは発生しません。

解決策は、CSS を変更した後に要素の offsetHeight を明示的にリクエストすることです。このアクションによりリフローが開始され、ブラウザは変更されたスタイルを認識して適用するように強制されます。

これを実現するコードは次のとおりです。

function reflow(elt){
    console.log(elt.offsetHeight);
}

ここで、「elt」は作成した要素です。スタイルが に変わります。 CSS を変更した後に「reflow(elt)」を呼び出すと、目的のアニメーションがトリガーされます。

以上がCSS トランジションがレスポンシブ画像スライダーで機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。