JavaScript を使用して WebKit CSS アニメーションを再トリガーするにはどうすればよいですか?

JavaScript を使用した WebKit CSS アニメーションの再トリガー

問題

-webkit-animation ルールを使用して定義されたアニメーションは 1 回しかトリガーできません。アニメーションを再度トリガーするには、完了後にアニメーションをリセットする方法が必要です。

解決策

解決策は、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 中国語 Web サイトの他の関連記事を参照してください。