問題タブ [web-animations]

Web Animation APIを使用して単純なアニメーションを作成し、ユーザーが でマウスを動かすとtargetアニメーションが左から右に開始し、ユーザーがマウスを から離すとtargetアニメーションが反転し、targetが から移動するようにします。右から左へ。

現在、ユーザーがアニメーション中にマウスを出し入れすると、アニメーションがぎくしゃくして、スムーズな効果が得られません。

この問題を解決する方法を知りたいです。

注: 現在、私は Web Animation API を使用しています。ただし、CSS キーフレーム アニメーションを使用すると、同じ問題が発生します。

また、次の解決策を使用してこの問題を解決しようとしましたが、状況は改善されましたが、まだ問題があります。これがライブの例ですhttps://jsfiddle.net/x784xwoa/5/

Google とその開発者は、パフォーマンスをテストして 60 fps に近づけるべきだと言っていますが、ツールが壊れているか、これでもひどい仕事をしているようです。

• 訪問google.comして何かを探す
• クロム開発者ツールを開き、
• タイムラインに移動 -> レコードを押します (左側の黒い点)
• 結果ページをスクロール
• 録音を停止する
• びっくりする

これが派手なアニメーションや重い JS のないページであっても、タイムラインは赤く、次のように表示されます。

長いフレーム時間は、ジャンクを示しています。

どうしてこれなの。Google にフロントエンドの問題がありますか、それとも記録ツールが壊れていますか?

WAAPI を使用してイメージチェンジャーを作成しようとしています。

遅延が増加し、endDelay が減少するはずの画像のループがありますが、反復では機能しません。

2回繰り返した後、不規則にちらつくようです。

これと戦うためのアイデアに感謝します。

ティア・マティアス

イベント エミッターで削除される子コンポーネントがあり、削除時にアニメーションを追加したいと考えています。私の考えは、ワイルドカード状態から無効にアニメーション化することでした:

ただし、削除アニメーションは実行されていません。助けていただければ幸いです。