Wie erkenne ich, wann CSS3-Übergänge beginnen und enden?

CSS3-Übergangsereignisse

CSS3-Übergänge bieten eine nahtlose Möglichkeit, Ihren Webseiten Animationen und Effekte hinzuzufügen. Um diese Animationen jedoch effektiv steuern und synchronisieren zu können, ist es wichtig zu wissen, wann sie beginnen und enden. Geben Sie CSS3-Übergangsereignisse ein.

Ereignistypen

Je nach verwendetem Browser werden unterschiedliche Ereignisse ausgelöst, wenn ein CSS3-Übergang beginnt oder endet:

• W3C CSS Transitions Draft:

  • Übergangsstart (Start)
  • Übergangsende (Ende)

• Webkit:

  • webkitTransitionEnd (Ende)

• Mozilla:

  • Übergangende (Ende)

• Oper:

  • oTransitionEnd (Ende)

• Internet Explorer:

  • transitionend (end)

Auf Ereignisse warten

Um auf CSS3-Übergangsereignisse zu warten, müssen Sie kann JavaScript-Ereignis-Listener verwenden:

element.addEventListener('transitionend', function(event) {
  // Transition completed
});

Browserkompatibilität

Die Die Verfügbarkeit von CSS3-Übergangsereignissen variiert je nach Browser. Informationen zur Kompatibilität finden Sie in der folgenden Tabelle:

Browser	Transition Start Event	Transition End Event
W3C CSS Transitions Draft	Yes	Yes
Webkit	No	Yes
Mozilla	No	Yes
Opera	No	Yes
Internet Explorer	No	Yes

Verwendungsbeispiel

Der folgende Code zeigt, wie Transitionend verwendet wird, um auf den Abschluss eines CSS3-Übergangs zu warten:

<div>

Wenn Sie mit der Maus über das #box-Element fahren, wird die Breite durch den Übergang sanft auf 200 Pixel animiert. Das Transitionend-Ereignis wird ausgelöst, wenn der Übergang abgeschlossen ist.

Das obige ist der detaillierte Inhalt vonWie erkenne ich, wann CSS3-Übergänge beginnen und enden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!