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

WebKit-CSS-Animationen dynamisch erneut auslösen

Bei der Arbeit mit CSS-Animationen, die von WebKit unterstützt werden, kann es Fälle geben, in denen Sie erneut auslösen müssen. löst eine Animation nach ihrer ersten Ausführung aus. Um dies zu erreichen, ohne auf Zeitüberschreitungen oder mehrere Animationen angewiesen zu sein, können wir ein integriertes Ereignis nutzen: „webkitAnimationEnd“.

Dieses Ereignis wird ausgelöst, wenn die Animation abgeschlossen ist, sodass wir sie programmgesteuert zurücksetzen und neu starten können. So geht's:

In einfachem JavaScript:

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

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

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // Prevent default browser behavior here if needed.
};

In jQuery:

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

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // Prevent default browser behavior here if needed.
});

Dieser Ansatz bietet eine Saubere und effektive Möglichkeit, CSS-Animationen bei Bedarf erneut auszulösen. Es macht komplexe Zeitüberschreitungen oder zusätzliche Animationen überflüssig und gewährleistet reibungslose und nahtlose Übergänge.

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