CSSアニメーションがJSによってブロックされるかどうかについての簡単な議論

CSS のアニメーション部分は JS によってブロックされますが、transform のアニメーションは影響を受けません。

以下は、js ブロッキング アニメーションを有効にした margin-left 移動アニメーションのパフォーマンス チャートです。

<スタイル>
.walkabout-old-school {
  アニメーション: 3 秒のスライド マージン 線形無限;
}
 
@keyframes スライドマージン {
  {margin-left: 0;} から
  50% {左マージン: 100%;}
  {margin-left: 0;} へ
}
</スタイル>
<スクリプト>
関数kill() {
  var start = +新しい日付;
  while (+新しい日付 - 開始 < 2000){}
}
</スクリプト> 

上の図では、kill メソッドを実行した後、アニメーションが 2 秒間停止してから続行されることが明確にわかります。

上の図から、js を有効にしてから 2 秒以内に、レンダリング プロセスは kill 関数が実行されるまで待機してから実行されることがわかります。下の図を見ると、マージンの変更によって DOM が再レイアウトされ、kill 関数が実行されるまでレイアウトが開始されないことがわかります。につながる

次に、アニメーションとして変換を使用する要素を確認します

.walkabout-new-school {
  アニメーション: 3 秒スライド変換線形無限;
}
@keyframes スライド変換 {
  {transform: translatex(0);} から
  50% {transform: translatex(300px);}
  {transform: translatex(0);} へ
}

次の図は実行中の比較チャートです（青はマージン、緑は変換）

上の図から、transformの使用はkillメソッドにまったく影響されないことがわかります。デバッグチャートを見てみましょう。

ここでは、margin は頻繁にページのリフローをトリガーしますが、transform はトリガーせず、js はページのリフローをブロックすることがわかります。そのため、マージンアニメーションが停止します。

したがって、日常生活でアニメーションを使用する場合は、変換をより頻繁に使用すると、最高のページパフォーマンスと効果を実現できます。

CSSアニメーションがJSによってブロックされるかどうかについてのこの記事はこれで終わりです。CSSアニメーションがJSによってブロックされるというより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後とも123WORDPRESS.COMを応援してくれることを願っています！