すべての子要素のすべてのCSSアニメーションを一時停止/再生する

私はCSSアニメーションでいっぱいのダッシュボードページを作成しています。ブートストラップのもの（アニメーション進行状況バー）からカスタムアニメーションまですべての子要素のすべてのCSSアニメーションを一時停止/再生する

いくつかの要素をクリックすると、すべてのアニメーションにオーバーラップするほぼフルスクリーンのモーダルがトリガーされるので、クラスを追加/削除することですべての一時的な一時停止を実行しますそのクラスが設定されているときにCSSを使用してすべてのアニメーションを一時停止します。

このソリューションは、モーダルを開くときにクラスを切り替えるだけで、jsの1行だけを使用します。

マイテンプレートは、多少のようになります。

<body> 
    <div class="modal"> 
     <!-- Modal code --> 
    </div> 
    <div class="app"> 
     <!-- Template --> 
    </div> 
</div>

それは、すべての子要素内のすべてのCSSアニメーションを一時停止し.appにクラスを追加することは可能ですか？

注1：

私はあなたが私が要求するものの正反対を使用することができます知っている：すなわち、トップ要素の1つにデフォルト.animation-playクラスを持っており、接頭辞すべての子要素を持ちますこのクラスのアニメーション、次にを削除してこのクラスを削除すると、すべてのアニメーションが一時停止します。

app.animation-play .somediv .somediv .element { 
    // animation code 
} 
app.animation-play .somediv .element { 
    // animation code 
} 
app.animation-play .somediv .somediv .somediv .somediv .element { 
    // animation code 
}

をしかし、私は、CSSコードのたくさんを編集する必要があり、それはどちらかの非常に良い見ていません：ただ好き。

注2：

私もJSソリューションのためのオープンなんだけど、私は重くがこれを達成するための純粋なCSSの方法を好むだろう。ホバー上

出典

2017-11-07 Jeffrey Roosendaal

'* {移行：なし！重要; } '？ – Pete

ピートが言及したことに加えて、これを加えてください： '* {animation：none！important; } ' – evilReiko

' .app.animation-pause * {// code} 'にして、ポーズクラスを適用すると' .app'だけで動作します。すべてを試して、この記事全体を書く*、私は完全に '*'を忘れてしまった...ありがとう、皆さん。 @ペテ、答えを加えてください（あなたが最初でした）、私はそれを受け入れたものとしてマークします。 –

「一時停止」のクラスはアプリのラッパーに追加されたとき、しかし、多くのCSSリンターはまだこれらの原因を使用しないことを警告するあなたはすべてを対象とするユニバーサルセレクタを使用することができますパフォーマンスへの影響。

最近の影響はごくわずかですが、多くのCSSのリセットではそれが使用されています。

.app.paused * { 
    animation: none; 
}

EDIT：

次のようなものを使用でき、それ以上のコメントを通じて探し

を上記セレクタは「ので、アニメーションを上書きするのに十分な優先度を持っていないかのように思えます！「重要」が追加されました。

.app.paused * { 
    animation: none !important; 
    transition: none !important; 
}

これは一般的には良い考えではありませんが、私は常に '！これらのセレクタを使用してスタイルシートを維持することが難しいため、すべてのコストをかけて「重要」になります。より優先順位の高いアニメーションを上書きすることができれば、 '！important'を使うのではなく、そうするのが良いでしょう。

EDIT 2：

あなたはJSのソリューションに開いていた述べたように、ここで指定されたセレクタ内のすべてのアニメーションをクリアする必要がありますいくつかのJSです。私はこの方法でそれをやってのパフォーマンスへの影響が何であるかわからないが、私は他の誰かが唯一のJS使用してそれを行うことを好む念のためにここにこれを追加しました：

let stopAnimationsWrap = document.querySelector('.app'); 
let stoppedAnims = []; 

// Stop animations 
document.querySelector('.stop').addEventListener('click',() => { 
    let appAllEls = stopAnimationsWrap.querySelectorAll('*'); 
    let allElsAr = Array.prototype.slice.call(appAllEls); 

    allElsAr.forEach((thisEl) => { 
    let elClass = thisEl.classList[0]; 
     let cs = getComputedStyle(thisEl, null); 
    let thisAnimation = cs.getPropertyValue('animation-name'); 

    if (thisAnimation !== 'none') { 

     stoppedAnims.push([elClass, { 
     'animationName': thisAnimation 
     }]); 

     thisEl.style.animationName = 'none'; 
    } 
    }); 
}); 

// Start animations 
document.querySelector('.start').addEventListener('click',() => { 

    stoppedAnims.forEach((thisEl) => { 
    let domEl = '.' + thisEl[0]; 

    stopAnimationsWrap.querySelector(domEl).style.animationName = thisEl[1].animationName; 
    }); 
});

フィドル：

https://jsfiddle.net/vu6javb2/14/

出典

2017-11-07 14:47:18 Alex

ありがとうございます。しかし、@Peteはすでにコメントに解決策を教えてくれました。だから私はあなたの答えを受け入れるようにすることはできません（Peteは質問を投稿しない限り、私は+1します）また、影響は実際には100以上のアニメーションプログレスバーでは極小ではありません。これはモニターのようなダッシュボードで、ユーザーは必要な数だけ追加することができます。モーダルでは、バックグラウンドでの同時アニメーションの*ロット*が発生するとフレームレートが低くなるインタラクティブなチャートです。 –

心配しないで、「重要！」の問題を覚えておいてください。モダールをアクティブにして将来的に再生するアニメーションが必要な理由は何でも、最初のものを上書きするためにスタイルシートに「重要」を追加する必要があります。 – Alex

私はむしろ '：not 'でこれらの状況を処理したいと思います。私は現在 '.app.animation-pause *：not（.animated）'を使ってanimate.cssライブラリを除外しています。私はちょうど '*'について完全に忘れてしまったのでちょっと愚かだと感じています... –

-2

.app { 
    -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */ 
    animation-play-state: paused; 
}

：

.app:hover { 
    -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */ 
    animation-play-state: paused; 
}

出典

2017-11-07 14:24:12

うまくいきませんでした。これはすでに試しました –

すべての子要素のすべてのCSSアニメーションを一時停止/再生する

答えて

関連する問題