Wie kann ich WebKit-CSS-Animationen mithilfe von JavaScript erneut auslösen?

Erneutes Auslösen von WebKit-CSS-Animationen mit JavaScript

Problem

Animationen, die mit der Regel -webkit-animation definiert wurden, können nur einmal ausgelöst werden. Um die Animation erneut auszulösen, benötigen Sie eine Möglichkeit, sie nach Abschluss zurückzusetzen.

Lösung

Die Lösung liegt in der Verwendung des webkitAnimationEnd-Ereignisses, das ausgelöst wird, wenn eine WebKit-CSS-Animation beendet ist. Durch das Hinzufügen eines Ereignis-Listeners zum animierten Element können Sie erkennen, wann die Animation endet, und ihre Eigenschaften zurücksetzen, damit sie erneut ausgelöst werden kann.

Implementierung

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

Cross-Browser-Unterstützung:

Die bereitgestellten Code funktioniert speziell für WebKit-Browser. Um andere Browser zu unterstützen, können Sie eine Funktionserkennungsbibliothek wie diese verwenden:

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

Mit dieser Bibliothek können Sie den folgenden Code verwenden:

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

Das obige ist der detaillierte Inhalt vonWie kann ich WebKit-CSS-Animationen mithilfe von JavaScript erneut auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!