JavaScript를 사용하여 WebKit CSS 애니메이션을 다시 시작하는 방법은 무엇입니까?

JavaScript를 통해 WebKit CSS 애니메이션을 다시 트리거하는 방법

이 질문은 JavaScript를 사용하여 CSS 애니메이션을 다시 트리거하는 문제를 다룹니다. 기존 애니메이션 규칙 "@-webkit-keyframes shake"는 흔들림 효과를 정의하지만 이후에 JavaScript를 통해 이를 다시 활성화하려는 시도는 성공하지 못했습니다.

제공된 솔루션은 "animationEnd" 이벤트, 특히 "webkitAnimationEnd"를 활용합니다. 웹킷 브라우저. 이 이벤트가 트리거되면 애니메이션 완료를 나타냅니다.

애니메이션을 다시 트리거하기 위해 이벤트 리스너가 "webkitAnimationEnd" 이벤트 요소에 추가됩니다. 이 이벤트를 수신하면 요소의 "webkitAnimationName" 스타일 속성이 지워지고 애니메이션이 효과적으로 재설정됩니다.

예(일반 바닐라 JavaScript):

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

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

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // You may want to prevent default action here.
};

예 (jQuery):

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

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // You may want to prevent default action here.
});

크로스 브라우저 지원:

크로스 브라우저 지원을 위해 "css3AnimationSupport" 개체를 사용하여 CSS를 감지할 수 있습니다. 다양한 브라우저에서 지원되는 전환, 변형 및 애니메이션 속성.

var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style;

    return {
        transition: (function(){
            return divStyle.MozTransition     === ''? {name: 'MozTransition'   , end: 'transitionend'} :
                (divStyle.MsTransition     === ''? {name: 'MsTransition'    , end: 'msTransitionend'} :
                (divStyle.WebkitTransition === ''? {name: 'WebkitTransition', end: 'webkitTransitionEnd'} :
                (divStyle.OTransition      === ''? {name: 'OTransition'     , end: 'oTransitionEnd'} :
                (divStyle.transition       === ''? {name: 'transition'      , end: 'transitionend'} :
                false))));
        })()
        // ... Other detections omitted for brevity
    };
}());

위 내용은 JavaScript를 사용하여 WebKit CSS 애니메이션을 다시 시작하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!