如何使用 JavaScript 重新觸發 WebKit CSS 動畫？

使用 JavaScript 重新觸發 WebKit CSS 動畫

問題

使用 -webkit-animation 規則定義的動畫只能觸發一次。要再次觸發動畫，您需要一種在動畫完成後重置它的方法。

解決方案

解決方案在於利用 webkitAnimationEnd 事件，該事件在 WebKit CSS 動畫完成時觸發。透過向動畫元素新增事件監聽器，您可以偵測動畫何時結束並重設其屬性以允許再次觸發。

實作

簡單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.
};

j Query:

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中文網其他相關文章！