問題タブ [web-animations-api]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
39 参照

animation - Web アニメーション API — 逆再生ではなく逆再生する方法は?

Web Animations API にはreverse、実行中のアニメーションを現在向かっている方向とは逆に再生できるメソッドがあります。

ただし、定義されたアニメーションを逆方向に再生したいというシナリオがあります。現時点では、アニメーションが最初に前進するか後退するかを確認してから反対のことを行うことでこれを達成していますが、これは不安定に感じます!

定義されたアニメーションを逆方向に実行するように要求するための確立されたパターンはありますか (必ずしも現在の再生ヘッドから逆方向に実行するとは限りません)?

以下のコード例では、最初のインスタンス ( idx === 0) を使用している場合、先に進むかどうかを確認しplaybackRateます1。これがないと、アニメーションは最初に逆方向に実行されます。

必要に応じてアニメーションを逆方向に実行する簡単な方法があるべきだと思いますが、ありますか?

0 投票する
0 に答える
62 参照

javascript - Web アニメーション API、チェーンの最後で最初のアニメーションをリセット

初めて Web アニメーション API を試して、いくつかの値を連鎖させようとしています。最初のアニメーションが完了すると、X 軸に沿って 200 ピクセル、次に Y 軸に沿って 200 ピクセル下に移動するこの単純なアニメーションに関して、私は少し混乱しています。

ただし、アニメーションの最後に、最初のアニメーションの X 値がリセットされます。'both' | 'forwards'2 番目の変換宣言で translateX を 0/200 に設定するだけでなく、塗りつぶしモード プロパティをいじってみました。ここで非常に単純なものが欠けているように感じます。