如何使用 jQuery 的 .animate() 方法实现跨浏览器兼容的 CSS 旋转动画？-css教程-PHP中文网

如何使用 jQuery 的 .animate() 方法实现跨浏览器兼容的 CSS 旋转动画？

Patricia Arquette

发布： 2024-12-11 18:34:21

原创

171 人浏览过

How Can I Achieve Cross-Browser Compatible CSS Rotation Animations Using jQuery's .animate() Method?

使用 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
    });
  });
};

登录后复制

用法：