jQuery의 .animate()를 사용하여 브라우저 간 호환 CSS 회전을 어떻게 달성할 수 있습니까?

CSS 회전: jQuery.animate()와의 브라우저 간 호환성

브라우저 간 호환 회전을 달성하려는 시도(IE9) , jQuery의 .css() 및 .animate() 메서드를 모두 사용할 때 문제가 발생할 수 있습니다. .css()는 회전을 활성화하지만 .animate()는 회전에 실패합니다. 이 문제를 해결하기 위해 .animateRotate() 플러그인은 우아한 솔루션을 제공합니다.

jQuery.animateRotate()

.animateRotate()는 다음을 위한 사용자 친화적인 인터페이스를 제공합니다. CSS 변환에 애니메이션을 적용합니다. 허용되는 인수는 다음과 같습니다.

• angle: 회전 각도를 도 단위로 지정합니다.
• duration: 애니메이션 지속 시간을 정의합니다. 기본값은 400 milliseconds.
• easing: 애니메이션의 여유 기능을 결정하며 기본값은 "swing"입니다.
• complete: 다음과 같이 실행되는 선택적 콜백 함수입니다.

사용:

.animateRotate()를 활용하는 두 가지 기본 방법이 있습니다. 짧은 방법은 각도를 인수로 직접 전달하는 것입니다.

$(node).animateRotate(90);

또는 더 많은 제어를 위해 추가 옵션과 함께 객체를 전달할 수 있습니다:

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

단계 함수 :

단계 기능을 사용하면 애니메이션의 각 단계에서 추가 작업을 수행할 수 있습니다. 이는 사용자 정의 전환에 특히 유용합니다.

비하인드 스토리:

.animateRotate()는 애니메이션을 사용한 CSS 변환이라는 기술을 사용합니다. 회전에 직접 애니메이션을 적용하는 대신 각도 값에 애니메이션을 적용한 다음 변환 속성에 적용합니다. 이 해결 방법을 사용하면 직접적인 CSS 변환 애니메이션을 지원하지 않는 브라우저에서 애니메이션을 사용할 수 있습니다.

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