jQuery의 .animate() 메서드를 사용하여 브라우저 간 호환 가능한 CSS 회전 애니메이션을 어떻게 얻을 수 있습니까?

jQuery.animate()를 사용한 크로스 브라우저 CSS 회전

크로스 브라우저 호환 회전을 생성하려고 할 때 jQuery의 .animate()를 만날 때 일반적인 장애물이 발생합니다. 방법. CSS 변환은 널리 퍼져 있지만 애니메이션 영역에서는 여전히 파악하기 어렵습니다. 이 문서에서는 .animate()를 사용하여 회전을 가능하게 하고 브라우저 간 호환성을 유지하는 솔루션을 제공하여 문제를 해결합니다.

문제

다음 코드 조각을 고려하세요.

$(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()를 사용하여 ID가 ​​"MyDiv1"인 요소를 효과적으로 회전하지만 호출 시 회전이 발생하지 않습니다. "MyDiv2"의 .animate(). 이러한 차이는 CSS-Transform이 본질적으로 jQuery를 사용하는 애니메이션과 호환되지 않기 때문에 발생합니다.

해결책

jQuery로 CSS-Transform을 애니메이션화하려면 .animate() 메서드를 사용하여 해결 방법을 구현할 수 있습니다. 단계 콜백 포함:

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

이 솔루션에서는 의사 개체가 0도에서 지정된 각도까지 애니메이션됩니다. 이 애니메이션의 각 단계는 요소의 CSS 변환 속성을 업데이트하여 지정된 기간 동안 요소를 효과적으로 회전시킵니다.

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

이 플러그인은 편리한 구문을 제공합니다.

결론

jQuery의 .animate() 메서드 내에서 단계 콜백을 활용하면 이제 CSS-Transforms를 사용하여 요소에 대해 브라우저 간 호환되는 회전 애니메이션을 구현할 수 있습니다. 이 기술을 사용하면 CSS 변환을 기본적으로 지원하지 않는 구형 브라우저에서도 원활한 회전이 가능합니다.

위 내용은 jQuery의 .animate() 메서드를 사용하여 브라우저 간 호환 가능한 CSS 회전 애니메이션을 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!