javascript - 遅延を使用しない場合は非常にスムーズであるのに、アニメーションを遅延させるためにanimation-deferまたはsetimeoutを使用するとアニメーションが停止するのはなぜですか?
PHP中文网
PHP中文网 2017-05-24 11:37:02
0
1
688

1. 遅延にanimation-deferまたはsetimeoutを使用すると、アニメーションの遅延が発生するのはなぜですか。遅延を使用しない場合は非常にスムーズです。800kの画像を移動しています。その遅延は、常にスタックするという意味ではありません。たとえば、次の場合次のアニメーション: moveup 0.9s easy-in-out forwards; アニメーションへの変更: moveup 0.9s easy-in-out forwards 0.4s;、約 0.5 秒でスタックしますか?
2.

リーリー

メインのコードは上記の CSS で、後から js を使用して目的を達成するためのクラス名を追加します。

3. 携帯電話でのテストでは遅延が発生しますが、パソコン側では問題ありません。エラーメッセージも表示されません。つまり、遅延を追加しない場合はアニメーションがスムーズに進行します。遅延を追加する場合は、追加された遅延時間 (0.4 秒または 0.6 秒など) に基づいて、さまざまな位置でフリーズします。コンピューターでテストする場合は問題ありませんが、携帯電話でテストするとフリーズします。私の携帯電話アンドロイドです。

4.

/a/11...、
を最適化するためにコンピューターでさまざまな答えを検索しました。最初は left を使用していましたが、後で変更し、transform を使用することを学びました

5. 最終結果は


問題ないようです、赤色も出ていません。考えられる原因を知りたいです

PHP中文网
PHP中文网

认证高级PHP讲师

全員に返信 (1)
黄舟

CSS ハードウェア アクセラレーションを有効にするために、translateZ(0) を追加しました。この部分は実際にはスタックしていますが、これはページが CSS をロードするときに発生するため、アニメーションにはプリセットがあり、ロード処理が発生することがわかります。ブラウザ レンダラーが計算のために結果をハードウェアに渡した後に結果を返すプロセス中に (2 つの不動アニメーション ソリューションを使用できます。JS はタイムアウトを使用するか、タイムアウトを使用しません。メモリの可視性を確認します。もちろん、アニメーションは複雑です \ただし、JS コントロールはプリロード プロセスを人為的に遅延させ、現在のアニメーションとは別に遅延アニメーションを計算し、大量の計算 (シャドウとアニメーション) を実行します。透明度) は、明らかなちらつき、フレームスキップ、さらには遅延を引き起こします

もちろん、別の極端な例もあります。トランスフォーム、トランジション、アニメーションの混合です。2 つのアニメーションを切り替える場合、プリロードされたアニメーション プロセスを切り替える必要があり、上記の状況も発生します。

話しすぎてごめんなさい; PS: chrome、FF、IE10 はすでに w3c 標準書き込みをサポートしています;

リーリー
いいねを押す+0
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!