jQuery.animate()가 CSS3 회전에 작동하지 않는 이유는 무엇이며 jQuery를 사용하여 브라우저 간 애니메이션 회전을 어떻게 달성할 수 있습니까?

jQuery.animate()를 사용한 브라우저 간 회전

문제

jQuery.animate()를 사용한 브라우저 간 회전은 CSS-Transforms의 비애니메이션 기능. 아래 코드는 문제를 보여줍니다.

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

회전은 .css()를 사용할 때 작동하지만 .animate()에서는 작동하지 않습니다. 왜? 그리고 이 장애물을 어떻게 극복할 수 있습니까?

해결책

CSS-Transform은 jQuery에서 직접적인 애니메이션 지원이 부족하지만 다음과 같은 단계 콜백을 사용하여 해결 방법이 가능합니다.

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

이 방법을 사용하면 jQuery를 사용하여 요소를 회전할 수 있습니다. 또한 jQuery 1.7에서는 CSS3 변환 접두사가 필요하지 않습니다.

jQuery 플러그인

프로세스를 단순화하려면 다음과 같이 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);

Optimized Plugin

더 나은 효율성과 유연성을 위해 최적화된 플러그인을 사용할 수 있습니다. 생성됨:

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

사용법

플러그인은 두 가지 사용 방법을 제공합니다:

1. 한 줄 구문:

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

2. 객체 구문(3개 이상 선호) 인수):

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

결론

이 플러그인은 jQuery의 애니메이션 기능을 사용하여 브라우저 간 CSS 회전을 가능하게 합니다. 수동으로 회전을 계산할 필요가 없으며 회전 효과를 얻을 수 있는 편리하고 최적화된 방법을 제공합니다.

위 내용은 jQuery.animate()가 CSS3 회전에 작동하지 않는 이유는 무엇이며 jQuery를 사용하여 브라우저 간 애니메이션 회전을 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!