JavaScript를 사용하여 WebKit CSS 애니메이션을 안정적으로 다시 트리거하려면 어떻게 해야 합니까?

WebKit CSS 애니메이션을 강제로 다시 트리거

WebKit CSS 애니메이션으로 작업할 때 애니메이션을 여러 번 다시 트리거하려고 하면 제한이 발생할 수 있습니다. . 이 문서에서는 이러한 시나리오를 다루고 시간 초과나 추가 애니메이션에 의존하지 않고 JavaScript를 통해 CSS 애니메이션을 다시 시작하기 위한 솔루션을 제공합니다.

이를 달성하기 위해 WebKit 브라우저는 완료 시 트리거되는 "webkitAnimationEnd" 이벤트를 활용합니다. 애니메이션 사이클. 이 이벤트를 활용하면 프로그래밍 방식으로 애니메이션을 재설정하고 다시 실행할 수 있습니다.

바닐라 JavaScript 구현

순수한 JavaScript의 접근 방식은 다음과 같습니다.

1. 애니메이션화할 요소를 선택합니다.
2. 이벤트 리스너를 "webkitAnimationEnd" 이벤트입니다.
3. 이벤트 트리거 시 애니메이션을 재설정합니다.

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

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

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

jQuery 구현

jQuery를 활용하면 단순화된 구문:

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

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

크로스 브라우저 CSS 지원

크로스 브라우저 호환성을 위해 브라우저 감지 라이브러리 활용을 고려하세요. CSS3 전환 테스트는 다양한 브라우저에 대한 올바른 이벤트 이름과 애니메이션 속성을 식별하는 데 도움이 될 수 있는 지원 개체를 제공합니다.

// Browser detection object
var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style;
    return {
        transform: divStyle.MozTransform  ||
                   divStyle.MsTransform   ||
                   divStyle.WebkitTransform ||
                   divStyle.OTransform    ||
                   divStyle.transform,
        transition: divStyle.MozTransition ||
                    divStyle.MsTransition   ||
                    divStyle.WebkitTransition ||
                    divStyle.OTransition    ||
                    divStyle.transition
    };
}());

적절한 이벤트 이름과 애니메이션 속성을 활용함으로써 이 접근 방식을 통해 크로스 브라우저 호환 방식의 CSS 애니메이션.

위 내용은 JavaScript를 사용하여 WebKit CSS 애니메이션을 안정적으로 다시 트리거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!