jQuery の .animate() メソッドを使用して、クロスブラウザ互換の CSS 回転アニメーションを実現するにはどうすればよいですか?

jQuery.animate() を使用したクロスブラウザー CSS 回転

クロスブラウザー互換の回転を作成しようとすると、jQuery の .animate() に遭遇したときに一般的な障害が発生します。方法。 CSS 変換は至る所で使用されるようになりましたが、アニメーションの領域では依然としてとらえどころがありません。この記事ではこの問題に対処し、.animate() を使用して回転を可能にし、ブラウザ間での互換性を維持するソリューションを提供します。

問題

次のコード スニペットを考えてみましょう:

$(document).ready(function () { 
    DoRotate(30);
    AnimateRotate(30);
});

function DoRotate(d) {

    $("#MyDiv1").css({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform': 'rotate('+d+'deg)'
     });  
}

function AnimateRotate(d) {

        $("#MyDiv2").animate({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform':'rotate('+d+'deg)'
     }, 1000); 
}

このコードは、.css() を使用して ID「MyDiv1」の要素を効果的に回転させますが、.animate() を呼び出しても回転は発生しません。 「マイディビジョン2」この相違は、CSS-Transform が jQuery を使用したアニメーションと本質的に互換性がないために発生します。

解決策

jQuery を使用して CSS-Transform をアニメーション化するには、.animate() メソッドを使用して回避策を実装できます。ステップ コールバックを使用:

function AnimateRotate(angle) {
    // caching the object for performance reasons
    var $elem = $('#MyDiv2');

    // we use a pseudo object for the animation
    // (starts from `0` to `angle`), you can name it as you want
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            // in the step-callback (that is fired each step of the animation),
            // you can use the `now` paramter which contains the current
            // animation-position (`0` up to `angle`)
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

このソリューションでは、疑似オブジェクトが 0 からアニメーション化されます。指定された角度まで度を上げます。このアニメーションの各ステップは要素の CSS 変換プロパティを更新し、指定された期間にわたって要素を効果的にスムーズに回転させます。

jQuery プラグイン

プロセスを簡素化するために、次の要素をカプセル化する jQuery プラグインを作成できます。のアニメーション:

$.fn.animateRotate = function(angle, duration, easing, complete) {
  return this.each(function() {
    var $elem = $(this);

    $({deg: 0}).animate({deg: angle}, {
      duration: duration,
      easing: easing,
      step: function(now) {
        $elem.css({
           transform: 'rotate(' + now + 'deg)'
         });
      },
      complete: complete || $.noop
    });
  });
};

使用法:

$('#MyDiv2').animateRotate(90);

このプラグインは、回転をアニメーション化するための便利な構文を提供します。

結論

ステップ コールバックを利用することによってjQuery の .animate() メソッド内で、ブラウザ間互換性のある回転アニメーションを実現できるようになりました。 CSS-Transform を使用した要素。この手法により、CSS Transform をネイティブにサポートしていない古いブラウザでもスムーズな回転が可能になります。

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