如何使用 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 () 時不會發生旋轉「我的Div2。」出現這種差異的原因是CSS-Transforms 本質上與使用jQuery的動畫不相容。

解決方案

要使用jQuery 對CSS-Transforms 進行動畫處理，可以使用.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-Transforms 為元素實作跨瀏覽器相容的旋轉動畫。即使在本身不支援 CSS-Transforms 的舊版瀏覽器中，此技術也可以實現平滑旋轉。

以上是如何使用 jQuery 的 .animate() 方法實作跨瀏覽器相容的 CSS 旋轉動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！