Bagaimanakah Saya Boleh Mencapai Animasi Putaran CSS Serasi Cross-Pelayar Menggunakan Kaedah .animate() jQuery?

Putaran CSS Penyemak Imbas Silang Menggunakan jQuery.animate()

Dalam usaha mencipta putaran serasi silang penyemak imbas, halangan biasa timbul apabila menghadapi .animate() jQuery kaedah. Walaupun transformasi CSS telah wujud di mana-mana, ia tetap sukar difahami dalam bidang animasi. Artikel ini menangani isu ini, menyediakan penyelesaian yang membolehkan penggiliran menggunakan .animate() dan mengekalkan keserasian merentas penyemak imbas.

Masalahnya

Pertimbangkan coretan kod berikut:

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

Kod ini secara berkesan memutarkan elemen dengan ID "MyDiv1" menggunakan .css(), tetapi putaran tidak berlaku apabila memanggil .animate() pada "MyDiv2." Perbezaan ini timbul kerana CSS-Transforms tidak serasi dengan animasi menggunakan jQuery.

Penyelesaian

Untuk menganimasikan CSS-Transforms dengan jQuery, penyelesaian boleh dilaksanakan menggunakan kaedah .animate() dengan panggilan balik langkah:

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

Dalam penyelesaian ini, objek pseudo ialah dianimasikan dari 0 darjah ke sudut yang ditentukan. Setiap langkah animasi ini mengemas kini sifat transformasi CSS elemen, dengan berkesan memutarkannya dengan lancar sepanjang tempoh yang ditentukan.

Pemalam jQuery

Untuk memudahkan proses, anda boleh mencipta pemalam jQuery yang merangkumi animasi:

$.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:

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

Pemalam ini menyediakan sintaks yang mudah untuk menghidupkan putaran.

Kesimpulan

Dengan memanfaatkan panggilan balik langkah dalam kaedah .animate() jQuery, anda kini boleh mencapai animasi putaran serasi silang penyemak imbas untuk elemen menggunakan CSS-Transforms . Teknik ini membolehkan putaran lancar, walaupun dalam pelayar lama yang tidak menyokong CSS-Transforms secara asli.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Animasi Putaran CSS Serasi Cross-Pelayar Menggunakan Kaedah .animate() jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!