如何使用 jQuery 实现跨浏览器 CSS 旋转动画？

使用 jQuery.animate() 进行跨浏览器 CSS 旋转

问题：

执行使用 jQuery.animate() 的 CSS 旋转动画无法跨浏览器工作。使用 .css() 时旋转有效，但使用 .animate() 时则无效。

原因：

CSS-Transforms 无法直接使用 jQuery 进行动画处理。

解决方案：

执行使用 jQuery 进行 CSS-Transform 动画，可以使用以下替代方法：

function AnimateRotate(angle) {
    var $elem = $('#MyDiv2');
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

说明：

此方法使用自定义的“step”回调函数来更新动画每个步骤中所选元素的“transform”属性。 “step”函数接收当前动画位置（现在）作为参数，您可以使用它来计算所需的旋转角度。

插件：

您可以将此方法封装到 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);

更新：

提供的解决方案已更新多次，以提高效率并提供更多灵活性。

• 更新 2：优化以使参数的顺序无关紧要。
• 更新 2.1：修复了上下文问题完成回调。
• 更新2.2：添加了用于切换动画的启动参数。

其他使用详细信息：

• animateRotate 函数接受多个可选参数，包括持续时间、缓动和完整，并提供默认值。
• 用户可以通过多种方式提供这些参数，无论是位置参数参数或作为对象。
• “step”函数提供对每个动画步骤的旋转的额外控制。

以上是如何使用 jQuery 实现跨浏览器 CSS 旋转动画？的详细内容。更多信息请关注PHP中文网其他相关文章！