jQuery の .animate() を使用してクロスブラウザ互換の CSS 回転を実現するにはどうすればよいですか?

CSS 回転: jQuery.animate() とのブラウザー間互換性

ブラウザー間で互換性のある回転を実現する試み (IE9) 、jQuery の .css() メソッドと .animate() メソッドの両方を利用するときに問題が発生する可能性があります。 .css() は回転を有効にしますが、.animate() は回転に失敗します。この問題を解決するために、.animateRotate() プラグインは洗練されたソリューションを提供します。

jQuery.animateRotate()

.animateRotate() は、 CSS 変換のアニメーション化。受け入れられる引数は次のとおりです。

• angle: 回転角度を度単位で指定します。
• duration: アニメーションの継続時間を定義します。デフォルトは 400ミリ秒。
• easing: アニメーションのイージング関数を決定します。デフォルトは「swing」です。
• complete: 実行時に実行されるオプションのコールバック関数.animateRotate() を利用するには、主に 2 つの方法があります。簡単な方法では、角度を引数として直接渡す必要があります:

または、より詳細に制御するには、追加オプションを使用してオブジェクトを渡すことができます:

Step Function :

$(node).animateRotate(90);

ステップ関数を使用すると、アニメーションの各ステップ中に追加のアクションを実行できます。これは、カスタム トランジションに特に役立ちます。

$(node).animateRotate(90, {
  duration: 1337,
  easing: 'linear',
  complete: function () {},
  step: function () {}
});

舞台裏:

.animateRotate() は、アニメーションによる CSS 変換として知られる手法を使用します。回転を直接アニメーション化する代わりに、角度値をアニメーション化して、変換プロパティに適用します。この回避策により、直接 CSS 変換アニメーションをサポートしていないブラウザでもアニメーションが有効になります。

以上がjQuery の .animate() を使用してクロスブラウザ互換の CSS 回転を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。