如何使用 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中文網其他相關文章！