如何使用 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.
};

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中文网其他相关文章！