Bagaimanakah Saya Boleh Mencapai Animasi Putaran CSS Merentas Pelayar dengan jQuery?

Putaran CSS Merentas Penyemak Imbas dengan jQuery.animate()

Masalah:

Melaksanakan Animasi putaran CSS menggunakan jQuery.animate() gagal berfungsi merentas pelayar. Putaran berfungsi apabila menggunakan .css(), tetapi tidak apabila menggunakan .animate().

Punca:

CSS-Transforms tidak boleh dianimasikan secara langsung dengan jQuery.

Penyelesaian:

Untuk melakukan CSS-Transform animasi menggunakan jQuery, anda boleh menggunakan kaedah alternatif berikut:

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

Penjelasan:

Kaedah ini menggunakan fungsi panggil balik "langkah" tersuai untuk mengemas kini "transformasi " sifat elemen yang dipilih pada setiap langkah animasi. Fungsi "langkah" menerima kedudukan animasi semasa (sekarang) sebagai parameter, yang boleh anda gunakan untuk mengira sudut putaran yang diingini.

Plugin:

Anda boleh balut kaedah ini ke dalam pemalam jQuery untuk lebih mudah gunakan:

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

Penggunaan:

Untuk menggunakan pemalam, anda boleh menghubungi:

$('#MyDiv2').animateRotate(90);

Kemas kini:

Penyelesaian yang disediakan telah dikemas kini beberapa kali untuk meningkatkan kecekapan dan menyediakan lebih banyak fleksibiliti.

• Kemas kini 2: Dioptimumkan untuk menjadikan susunan hujah tidak penting.
• Kemas kini 2.1: Memperbaiki isu konteks dengan panggilan balik lengkap.
• Kemas kini 2.2: Menambah parameter mula untuk menogol animasi.

Butiran Penggunaan Tambahan:

• Fungsi animateRotate menerima beberapa parameter pilihan, termasuk tempoh, pelonggaran dan lengkap, dengan nilai lalai disediakan.
• Pengguna boleh menyediakan parameter ini dalam pelbagai cara, sama ada sebagai argumen kedudukan atau sebagai objek.
• Fungsi "langkah" menyediakan kawalan tambahan ke atas putaran pada setiap langkah animasi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Animasi Putaran CSS Merentas Pelayar dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!