Mengapa jQuery.animate() tidak berfungsi untuk putaran CSS3, dan bagaimanakah kita boleh mencapai putaran animasi silang pelayar menggunakan jQuery?

Putaran Merentas Pelayar dengan jQuery.animate()

Masalah

Putaran merentas pelayar dengan jQuery.animate() terbukti mencabar disebabkan oleh keupayaan bukan animasi CSS-Transforms. Kod di bawah menunjukkan isu:

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

Putaran berfungsi apabila menggunakan .css(), tetapi tidak dengan .animate(). kenapa? Dan bagaimanakah kita boleh mengatasi halangan ini?

Penyelesaian

Walaupun CSS-Transforms kekurangan sokongan animasi langsung dalam jQuery, penyelesaian boleh dilakukan menggunakan panggilan balik langkah seperti ini:

function AnimateRotate(angle) {
    // Cache the object for performance
    var $elem = $('#MyDiv2');

    // Use a pseudo object for the animation (starts from `0` to `angle`)
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            // Use the `now` parameter (current animation position) in the step-callback
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

Kaedah ini membenarkan putaran elemen menggunakan jQuery. Selain itu, jQuery 1.7 menghapuskan keperluan untuk awalan transformasi CSS3.

Pemalam jQuery

Untuk memudahkan proses, buat pemalam jQuery seperti ini:

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

Pemalam Dioptimumkan

Untuk kecekapan dan fleksibiliti yang lebih baik, pemalam yang dioptimumkan boleh dicipta:

$.fn.animateRotate = function(angle, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  var step = args.step;
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      $.style(e, 'transform', 'rotate(' + now + 'deg)');
      if (step) return step.apply(e, arguments);
    };

    $({deg: 0}).animate({deg: angle}, args);
  });
};

Penggunaan

Pemalam menyediakan dua cara untuk menggunakannya:

1. Sintaks baris tunggal:

$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});

2. Sintaks objek (diutamakan untuk lebih daripada tiga hujah):

$(node).animateRotate(90, {
  duration: 1337,
  easing: 'linear',
  complete: function () {},
  step: function () {}
});

Kesimpulan

Pemalam ini membolehkan penggiliran CSS merentas pelayar menggunakan keupayaan animasi jQuery. Ia menghapuskan keperluan untuk pengiraan putaran manual dan menyediakan cara yang mudah dan optimum untuk mencapai kesan putaran.

Atas ialah kandungan terperinci Mengapa jQuery.animate() tidak berfungsi untuk putaran CSS3, dan bagaimanakah kita boleh mencapai putaran animasi silang pelayar menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!