異なるアニメーションのアニメーションの再生を防止する（アニメーション効果が同じ）

Question

3つのdivを使用するランディングページがあります。 3つのうち1つのdivのみが特定の画面サイズで表示されるように設定されています。各部門は、メディアクエリを使用して特定の画面サイズで読み込みます。

路Div1 ---> 800ピクセル幅

DIV2件まで---> DIV3

801px 1400pxの幅間---> 1400px幅

たびに上記のページには、背景画像をロードCSSのフィルタを使用して白黒画像からカラー画像にdivを変更する

ウィンドウのサイズを変更すると問題が発生します。たとえば、ウィンドウのサイズを画面サイズ/ウィンドウサイズに合わせる場合Div2がdisplay：noneに設定され、Div1が表示されるようになります。その結果、divがロードされているので、白と黒のカラーCSSフィルタ効果をもう一度ロードします。しかし、この効果は、ページの読み込み中に1回しか再生されず、ブラウザのサイズが変更されたり、ipadが回転している（画面の幅が拡大している）場合には発生しません。

誰も私にこのための解決策を提案することはできますか？私は、特定の指定時間（バックグラウンドアニメーションがページロードから再生するのにかかる時間）後に、アニメーションが再生されるのを防ぐことを考えていました。どのようにこれを行うか、より良い解決策を手助けする方法を教えてもらえますか？

Answer 1

親要素にCSSクラス.animateを追加し、CSSフィルタの移行が終了したらそのクラスを削除する方法があります。それはtransitionendイベントで行うことができます。それについての詳細：https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/ あなたのCSSでは、セレクタでのみCSSフィルタ効果を作成できます。