jQuery.animate() が CSS3 回転に機能しないのはなぜですか?また、jQuery を使用してクロスブラウザーのアニメーション回転を実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

jQuery.animate() が CSS3 回転に機能しないのはなぜですか?また、jQuery を使用してクロスブラウザーのアニメーション回転を実現するにはどうすればよいですか?

Susan Sarandon

リリース： 2024-12-04 07:57:15

オリジナル

389 人が閲覧しました

Why doesn't jQuery.animate() work for CSS3 rotations, and how can we achieve cross-browser animated rotations using jQuery?

jQuery.animate() を使用したブラウザ間ローテーション

問題

jQuery.animate() を使用したブラウザ間ローテーションは、次の理由により困難であることが判明しました。 CSS-Transform の非アニメーション機能。以下のコードは問題を示しています:

$(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() を使用すると回転が機能しますが、.animate() では機能しません。なぜ？そして、この障害はどのように克服できるのでしょうか?

解決策

CSS Transforms には jQuery での直接アニメーションサポートがありませんが、次のようなステップコールバックを使用して回避策が可能です。

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

    // Use a pseudo object for the animation (starts from `0` to `angle`)
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            // Use the `now` parameter (current animation position) in the step-callback
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

ログイン後にコピー

このメソッドでは、jQuery を使用して要素を回転できます。さらに、jQuery 1.7 では、CSS3 変換プレフィックスが不要です。

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);

ログイン後にコピー

最適化プラグイン

効率と柔軟性を高めるために、最適化されたプラグインを使用できます。作成:

$.fn.animateRotate = function(angle, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  var step = args.step;
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      $.style(e, 'transform', 'rotate(' + now + 'deg)');
      if (step) return step.apply(e, arguments);
    };

    $({deg: 0}).animate({deg: angle}, args);
  });
};

ログイン後にコピー

使用法

プラグインには 2 つの使用方法があります:

単一行構文:

$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});

ログイン後にコピー

オブジェクト構文 (3 つ以上の場合に推奨) argument):

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

ログイン後にコピー

結論

このプラグインは、jQuery のアニメーション機能を使用して、ブラウザー間の CSS 回転を有効にします。これにより、手動で回転を計算する必要がなくなり、便利で最適化された方法で回転効果を実現できます。

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