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

WebKit-CSS-Animationen unbedingt erneut auslösen

Bei der Arbeit mit WebKit-CSS-Animationen können Einschränkungen auftreten, wenn versucht wird, Animationen mehrmals erneut auszulösen . Dieser Artikel befasst sich mit solchen Szenarien und bietet Lösungen zum erneuten Initiieren von CSS-Animationen über JavaScript, ohne auf Zeitüberschreitungen oder zusätzliche Animationen zurückgreifen zu müssen.

Um dies zu erreichen, verwenden WebKit-Browser das Ereignis „webkitAnimationEnd“, das nach Abschluss des ausgeführt wird Animationszyklus. Durch die Nutzung dieses Ereignisses wird es möglich, Animationen programmgesteuert zurückzusetzen und neu zu starten.

Vanilla-JavaScript-Implementierung

In reinem JavaScript umfasst der Ansatz Folgendes:

1. Auswählen des zu animierenden Elements.
2. Hinzufügen eines Ereignis-Listeners zum „webkitAnimationEnd“-Ereignis.
3. Zurücksetzen der Animation bei Ereignisauslösung.

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

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

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

jQuery-Implementierung

Die Verwendung von jQuery bietet eine vereinfachte Syntax :

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

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

Cross-Browser CSS Unterstützung

Für eine browserübergreifende Kompatibilität sollten Sie die Verwendung einer Browsererkennungsbibliothek in Betracht ziehen. CSS3-Übergangstests stellen ein Unterstützungsobjekt bereit, das dabei helfen kann, die richtigen Ereignisnamen und Animationseigenschaften für verschiedene Browser zu identifizieren.

// Browser detection object
var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style;
    return {
        transform: divStyle.MozTransform  ||
                   divStyle.MsTransform   ||
                   divStyle.WebkitTransform ||
                   divStyle.OTransform    ||
                   divStyle.transform,
        transition: divStyle.MozTransition ||
                    divStyle.MsTransition   ||
                    divStyle.WebkitTransition ||
                    divStyle.OTransition    ||
                    divStyle.transition
    };
}());

Durch die Nutzung der entsprechenden Ereignisnamen und Animationseigenschaften ermöglicht dieser Ansatz das erneute Auslösen von CSS-Animationen auf browserübergreifende Weise.

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