Comment puis-je relancer les animations CSS WebKit à l'aide de JavaScript ?

Redéclenchement des animations CSS WebKit avec JavaScript

Problème

Les animations définies à l'aide de la règle -webkit-animation ne peuvent être déclenchées qu'une seule fois. Pour déclencher à nouveau l'animation, vous avez besoin d'un moyen de la réinitialiser une fois qu'elle est terminée.

Solution

La solution réside dans l'utilisation de l'événement webkitAnimationEnd, qui est déclenché lorsqu'une animation CSS WebKit se termine. En ajoutant un écouteur d'événement à l'élément animé, vous pouvez détecter quand l'animation se termine et réinitialiser ses propriétés pour lui permettre d'être déclenchée à nouveau.

Implémentation

Plain 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.
});

Support multi-navigateurs :

Le fourni le code fonctionne spécifiquement pour les navigateurs WebKit. Pour prendre en charge d'autres navigateurs, vous pouvez utiliser une bibliothèque de détection de fonctionnalités comme celle-ci :

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;
}());

Avec cette bibliothèque, vous pouvez utiliser le code suivant :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!