JavaScript로 WebKit CSS 애니메이션을 어떻게 다시 트리거할 수 있습니까?

JavaScript를 사용하여 WebKit CSS 애니메이션 다시 트리거

CSS에서 애니메이션은 @ 기호를 사용하여 요소에 적용할 수 있는 시간이 제한된 시퀀스입니다. -webkit-keyframes 규칙. 그러나 어떤 경우에는 시간 제한이나 여러 애니메이션을 사용하지 않고 애니메이션을 다시 트리거해야 할 수도 있습니다.

한 가지 해결책은 애니메이션이 완료될 때 실행되는 animationEnd 이벤트를 활용하는 것입니다. WebKit 브라우저에서는 이 이벤트를 webkitAnimationEnd라고 합니다. 이벤트 리스너를 요소에 연결하면 애니메이션이 완료된 후 애니메이션을 재설정할 수 있습니다.

이벤트 기반 재설정

바닐라 JavaScript:

var element = document.getElementById('box');

element.addEventListener('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
}, false);

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
};

jQuery에서:

var $element = $('#box').bind('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
});

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
});

크로스 브라우저 호환성

크로스 브라우저 지원을 위해 CSS3 전환 테스트와 같은 라이브러리를 활용할 수 있습니다. 애니메이션 지원을 포함하여 다양한 CSS 속성 및 이벤트를 감지하는 지원 개체를 제공합니다.

var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style,
        support = {
            transition: ...
            transform: ...
            animation: ...
        };
}());

이 지원 개체를 사용하면 각 브라우저에 대한 애니메이션 속성 및 이벤트를 감지하여 일관된 처리가 가능합니다. 다양한 플랫폼에 걸쳐 CSS 애니메이션을 제공합니다.

위 내용은 JavaScript로 WebKit CSS 애니메이션을 어떻게 다시 트리거할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!