jQuery를 사용하여 브라우저 간 CSS 회전 애니메이션을 어떻게 얻을 수 있습니까?

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

문제:

수행 중 jQuery.animate()를 사용하는 CSS 회전 애니메이션이 브라우저 간 작동에 실패합니다. .css()를 사용할 때는 회전이 작동하지만 .animate()를 사용할 때는 작동하지 않습니다.

원인:

CSS 변환은 jQuery로 직접 애니메이션을 적용할 수 없습니다.

해결책:

수행하려면 jQuery를 사용하여 애니메이션을 CSS로 변환하려면 다음 대체 방법을 사용할 수 있습니다.

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

설명:

이 방법은 사용자 정의 "단계" 콜백 함수를 사용하여 업데이트합니다. 애니메이션의 각 단계에서 선택한 요소의 "변형" 속성. "step" 기능은 현재 애니메이션 위치(현재)를 매개변수로 수신하며, 이를 사용하여 원하는 회전 각도를 계산할 수 있습니다.

플러그인:

할 수 있습니다. 더 쉽게 이 방법을 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);

업데이트:

제공되는 솔루션은 효율성을 향상하고 더 많은 것을 제공하기 위해 여러 번 업데이트되었습니다. 유연성.

• 업데이트 2: 인수 순서를 중요하지 않게 만들기 위해 최적화되었습니다.
• 업데이트 2.1: 콜백을 완료하세요.
• 업데이트 2.2: 애니메이션 전환을 위한 시작 매개변수를 추가했습니다.

추가 사용 세부정보:

• animateRotate 함수는 다음을 포함한 여러 선택적 매개변수를 허용합니다. 기간, 완화 및 완료(기본값 제공)
• 사용자는 이러한 매개변수를 위치 인수 또는 객체 등 다양한 방법으로 제공할 수 있습니다.
• "단계" 기능은 각 애니메이션 단계에서 회전에 대한 추가 제어를 제공합니다.

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