使用 jQuery.animate() 進(jìn)行跨瀏覽器 CSS 旋轉(zhuǎn)

為了創(chuàng)建跨瀏覽器兼容的旋轉(zhuǎn)，遇到 jQuery 的 .animate() 時(shí)會(huì)出現(xiàn)一個(gè)常見的障礙方法。雖然 CSS 轉(zhuǎn)換已經(jīng)變得無處不在，但它們?cè)趧?dòng)畫領(lǐng)域仍然難以捉摸。本文解決了這個(gè)問題，提供了一個(gè)解決方案，可以使用 .animate() 進(jìn)行旋轉(zhuǎn)并保持跨瀏覽器的兼容性。

問題

考慮以下代碼片段：

$(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() 有效地旋轉(zhuǎn) ID 為“MyDiv1”的元素，但在調(diào)用 .animate() 時(shí)不會(huì)發(fā)生旋轉(zhuǎn)“我的Div2?！背霈F(xiàn)這種差異的原因是 CSS-Transforms 本質(zhì)上與使用 jQuery 的動(dòng)畫不兼容。

解決方案

要使用 jQuery 對(duì) CSS-Transforms 進(jìn)行動(dòng)畫處理，可以使用 .animate() 方法實(shí)現(xiàn)解決方法使用步驟回調(diào)：

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

在此解決方案中，偽對(duì)象從 0 度動(dòng)畫到指定的角度 角度。此動(dòng)畫的每一步都會(huì)更新元素的 CSS 變換屬性，從而在指定的持續(xù)時(shí)間內(nèi)有效地平滑旋轉(zhuǎn)它。

jQuery 插件

為了簡(jiǎn)化該過程，您可以創(chuàng)建一個(gè)封裝了 jQuery 插件動(dòng)畫：

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

這個(gè)插件提供了一個(gè)方便的語法

結(jié)論

通過利用 jQuery 的 .animate() 方法中的步驟回調(diào)，您現(xiàn)在可以使用 CSS-Transforms 為元素實(shí)現(xiàn)跨瀏覽器兼容的旋轉(zhuǎn)動(dòng)畫。即使在本身不支持 CSS-Transforms 的舊版瀏覽器中，此技術(shù)也可以實(shí)現(xiàn)平滑旋轉(zhuǎn)。

以上是如何使用 jQuery 的 .animate() 方法實(shí)現(xiàn)跨瀏覽器兼容的 CSS 旋轉(zhuǎn)動(dòng)畫？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！