WebKit CSS 애니메이션을 동적으로 다시 트리거하려면 어떻게 해야 합니까?

WebKit CSS 애니메이션을 동적으로 다시 트리거

WebKit에서 제공하는 CSS 애니메이션으로 작업할 때 다시 시작해야 하는 경우가 있을 수 있습니다. 초기 실행 후 애니메이션을 트리거합니다. 시간 초과나 여러 애니메이션에 의존하지 않고 이를 달성하기 위해 내장 이벤트인 "webkitAnimationEnd"를 활용할 수 있습니다.

이 이벤트는 애니메이션이 완료되면 실행되므로 프로그래밍 방식으로 재설정하고 다시 시작할 수 있습니다. 방법은 다음과 같습니다.

일반 JavaScript의 경우:

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

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

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // Prevent default browser behavior here if needed.
};

jQuery의 경우:

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

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // Prevent default browser behavior here if needed.
});

이 접근 방식은 다음을 제공합니다. 필요에 따라 CSS 애니메이션을 다시 트리거하는 깨끗하고 효과적인 방법입니다. 복잡한 시간 초과나 추가 애니메이션이 필요하지 않아 부드럽고 원활한 전환이 보장됩니다.

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