為什麼 jQuery.animate() 不能用於 CSS3 旋轉，我們如何使用 jQuery 實作跨瀏覽器動畫旋轉？

使用jQuery.animate() 進行跨瀏覽器旋轉

問題

使用jQuery.animate() 進行跨瀏覽器旋轉具有挑戰性，因為CSS-Transforms 的非動畫功能。下面的程式碼示範了這個問題：

$(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);
  });
};

用法

外掛程式提供了兩種使用方式：

單行語法：

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

物件語法（三個以上首選參數）：

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

結論

插件使用 jQuery 的動畫功能實現跨瀏覽器 CSS 旋轉。它消除了手動旋轉計算的需要，並提供了一種方便且優化的方式來實現旋轉效果。

以上是為什麼 jQuery.animate() 不能用於 CSS3 旋轉，我們如何使用 jQuery 實作跨瀏覽器動畫旋轉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！