javascript - js を使用してトランジション効果を作成するにはどうすればよいですか?

Question

Xiaobai は js にあまり詳しくないので、js を使用してボタンをクリックし、5 秒後に p が右側の 500px の位置に移動した場合、どのような考えになりますか?この効果を生み出しますか？

これらすべての効果を実現するには、まずクラスを作成してから、js を使用して className を切り替える必要がありますか?

しかし、クリック イベントでは、すべての CSS 効果を記述しますか? QUQ

Answer 1

リーリー

簡単なデモを紹介しますので、これは方法の 1 つにすぎず、他にもたくさんあることがわかるでしょう。

Answer 2

これが欲しいものですか？以下のコードを参照してください。p は 5 秒で 500px に移動します。まず p にトランジション効果を設定し、右側に移動するクラスを追加します。

追記: これは単なるデモコードであり、互換性などは考慮されていません...

css3

リーリー リーリー リーリー

Answer 3

CSSを使用することも、jsで直接記述することもできます。 cssの場合はtransitionを使って記述します。特にBaiduの場合はクリックイベントが発生した際に要素にクラスを追加してスタイルを変更します。 jsの場合は、settimeoutを使用し、例として挙げた左マージンを取り、左マージンを少しずつ変更し、指定された値（cleartimeout）に達したら停止します

Answer 4

上記の通り、ie9以下の場合はタイマーを使用する必要があります

リーリー

Answer 5

通常は css3 が使用されますtransition实现过渡效果，要动画的话用animation。js を使用するとパフォーマンスに負荷がかかります。以下にいくつかの参考記事を示します。

Answer 6

css3d プロパティ