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

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

In CSS sind Animationen zeitlich begrenzte Sequenzen, die mit dem @ auf Elemente angewendet werden können -webkit-keyframes-Regel. In einigen Fällen kann es jedoch erforderlich sein, eine Animation erneut auszulösen, ohne Zeitüberschreitungen oder mehrere Animationen zu verwenden.

Eine Lösung besteht darin, das AnimationEnd-Ereignis zu verwenden, das ausgelöst wird, wenn eine Animation abgeschlossen ist. In WebKit-Browsern wird dieses Ereignis als webkitAnimationEnd bezeichnet. Durch Anhängen eines Ereignis-Listeners an das Element wird es möglich, die Animation nach Abschluss zurückzusetzen.

Ereignisgesteuertes Zurücksetzen

In Vanilla-JavaScript:

var element = document.getElementById('box');

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

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
};

In jQuery:

var $element = $('#box').bind('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
});

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
});

Cross-Browser Kompatibilität

Für die browserübergreifende Unterstützung kann eine Bibliothek wie CSS3-Übergangstests verwendet werden. Es stellt ein Unterstützungsobjekt bereit, das verschiedene CSS-Eigenschaften und -Ereignisse erkennt, einschließlich der Animationsunterstützung:

var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style,
        support = {
            transition: ...
            transform: ...
            animation: ...
        };
}());

Durch die Verwendung dieses Unterstützungsobjekts ist es möglich, die Animationseigenschaft und das Ereignis für jeden Browser zu erkennen, was eine konsistente Handhabung ermöglicht von CSS-Animationen auf mehreren Plattformen.

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