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を応援してくれることを願っています! |
<<: Apple M1チップにnginxをインストールし、vueプロジェクトをデプロイする詳細な手順
ngx_lua_module は、lua パーサーを nginx に埋め込み、lua 言語で記述され...
目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...
ウェブページの自動更新: <head></head> の間に次のコードを追加...
MySQL によって作成される最適化はインデックスを追加することですが、インデックスを追加しても目的...
まず解決策を見てみましょう #------------mysql の root ユーザーに権限を付与...
この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...
1. 問題の説明: MysqlERROR1698 (28000) の解決方法、新しくインストールされ...
目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...
目次1. Compose の紹介2. ComposeとDockerの互換性3. Dockerをインス...
目次序文1. vue-cliを使う1. Toastコンポーネントを定義する2. main.jsで設定...
1. 公式ウェブサイトから Linux バージョンをダウンロードします: https://dev.m...
目次1. 需要2. データベース設計3.Javaバックグラウンド構成の実装4. WeChatアプレッ...
1. はじめにGit は、規模の大小を問わずあらゆるプロジェクトを俊敏かつ効率的に処理するために使用...
プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...
目次Vuex とは何ですか? Vuexの5つの特性vuex の State 機能とは何ですか? vu...