Heim > Web-Frontend > CSS-Tutorial > Wie kann ich WebKit-CSS-Animationen mit JavaScript erneut auslösen?

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

DDD
Freigeben: 2024-12-19 17:09:17
Original
1059 Leute haben es durchsucht

How Can I Re-trigger WebKit CSS Animations with JavaScript?

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';
};
Nach dem Login kopieren

In jQuery:

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

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

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: ...
        };
}());
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage