JavaScript를 사용하여 WebKit CSS 애니메이션을 어떻게 다시 트리거할 수 있습니까?

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

문제

-webkit-animation 규칙을 사용하여 정의된 애니메이션은 한 번만 트리거될 수 있습니다. 애니메이션을 다시 트리거하려면 완료된 후 재설정하는 방법이 필요합니다.

해결책

해결책은 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';
  // You may want to preventDefault here.
};

jQuery:

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

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

크로스 브라우저 지원:

제공되는 내용 코드는 WebKit 브라우저에서만 작동합니다. 다른 브라우저를 지원하려면 다음과 같은 기능 감지 라이브러리를 사용할 수 있습니다.

var css3AnimationSupport = (function() {
  var div = document.createElement('div'),
    divStyle = div.style,
    support = {
      transition:
        divStyle.MozTransition === '' ? { name: 'MozTransition', end: 'transitionend' } :
        // Will ms add a prefix to the transitionend event?
        (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))),
      transform:
        divStyle.MozTransform === '' ? 'MozTransform' :
        (divStyle.MsTransform === '' ? 'MsTransform' :
        (divStyle.WebkitTransform === '' ? 'WebkitTransform' :
        (divStyle.OTransform === '' ? 'OTransform' :
        (divStyle.transform === '' ? 'transform' :
        false))))
    };
  support.transformProp = support.transform.name.replace(/([A-Z])/g, '-').toLowerCase();
  return support;
}());

이 라이브러리를 사용하면 다음 코드를 사용할 수 있습니다.

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

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