css - Cssアニメーションの最適化

Question

アニメーションオブジェクトを表示する必要がない場合（ビューポート上にない場合）にCSSアニメーションが実行されないように最適化できますか？ありがとう！

Answer 1

オブジェクトがビューポートにあることを検出できれば、アニメーションの説明を使用してcssクラスを追加/削除できます。何かのようなもの：

// the css class to be added/removed
.animationClass
{
      animation: someAnimation 5s;
     -moz-animation: someAnimation 5s; /* Firefox */
     -webkit-animation: someAnimation 5s; /* Safari and Chrome */
     -o-animation: someAnimation 5s; /* Opera */
}

// the jQuery code
if( isObjectInViewPort() == true){
   $('.someObject').addClass('animationClass'); // note that there is no dot before 'animationClass'
   // or remove it $('.someObject').removeClass('animationClass');
}

トリッキーな部分は、オブジェクトがビューポートに存在しなくなったことを確認することです。私の意見では、cssアニメーションは軽量で非常にうまく機能するため、オブジェクトがビューポートにあるかどうかを常にチェックし、アニメーションを防ぐことは、良いことよりも害をもたらします。