Verstehen von CSS3-Übergangsereignissen

CSS3-Übergänge ermöglichen reibungslose Animationen und visuelle Effekte auf Webelementen. Um das Benutzererlebnis zu verbessern und Aktionen mit diesen Übergängen zu synchronisieren, ist es wichtig, deren Fortschritt zu überwachen. Dieser Artikel befasst sich mit der Frage, ob CSS3 Ereignisse bereitstellt, um zu überprüfen, wann ein Übergang beginnt oder endet.

Der W3C CSS Transitions Draft

Der W3C CSS Transitions Draft legt fest, dass a Der CSS-Übergang löst entsprechende DOM-Ereignisse aus. Für jede Übergangseigenschaft wird ein Ereignis generiert. Dadurch können Entwickler Aktionen ausführen, die mit dem Abschluss des Übergangs zusammenfallen.

WebKit

Unter WebKit wird das webkitTransitionEnd-Ereignis ausgelöst, sobald ein Übergang abgeschlossen ist. Durch das Festlegen eines JavaScript-Ereignis-Listeners für dieses Ereignis können Entwickler die Vervollständigung abfangen.

box.addEventListener('webkitTransitionEnd', function(event) {
  alert("Finished transition!");
}, false);

Mozilla, Opera und Internet Explorer

Die meisten Browser unterstützen ein einzelnes Ereignis für den Abschluss des Übergangs:

• Firefox : transitend
• Opera: oTransitionEnd
• WebKit: webkitTransitionEnd
• Internet Explorer: Transitionend

In Internet Explorer wird das Transitionend-Ereignis nur ausgelöst, wenn der Übergang erfolgreich abgeschlossen wurde; Durch vorzeitiges Entfernen wird verhindert, dass das Ereignis ausgelöst wird.

Bringing It Together

Durch die Nutzung des entsprechenden Ereignisses basierend auf dem Browser und der Verwendung von JavaScript-Ereignis-Listenern können Entwickler das überwachen Fortschritt von CSS3-Übergängen und Durchführung notwendiger Aktionen synchron mit deren Abschluss.