Wie erkennt man den Anfang und das Ende von CSS3-Übergängen?

CSS3-Übergangsereignisse

Bei der Arbeit mit CSS3-Übergängen ist es oft hilfreich zu wissen, wann ein Übergang begonnen oder beendet hat. In CSS3 gibt es verschiedene Ereignisse, die von Elementen ausgelöst werden, um diese Übergänge anzuzeigen.

CSS-Übergangsendereignis

Definition:
Das Übergangsende Das Ereignis wird ausgelöst, wenn ein CSS-Übergang für die angegebene Eigenschaft abgeschlossen ist.

Syntax:

element.addEventListener('transitionend', callbackFunction, { once: true });

Beispiel:

const box = document.querySelector('.box');

box.addEventListener('transitionend', function(e) {
  console.log(`Transition for property ${e.propertyName} has ended.`);
}, { once: true });

Andere Übergangsereignisse

Über das Transitionend-Ereignis hinaus bieten einige Browser auch zusätzliche Ereignisse an:

Webkit-spezifische Ereignisse:

• webkitTransitionStart: Wird ausgelöst, wenn ein CSS-Übergang beginnt.
• webkitTransitionRun: Wird während eines CSS-Übergangs mehrmals ausgelöst.

Mozilla-spezifisches Ereignis:

• Übergangsstart: Wird ausgelöst, wenn ein CSS-Übergang für eine beliebige Eigenschaft beginnt.

Opernspezifisches Ereignis:

• oTransitionStart: Wird ausgelöst, wenn ein CSS-Übergang auf einer beliebigen Eigenschaft beginnt.

Internet Explorer-Ereignis:

• MSTransitionEnd: Wird ausgelöst, wenn ein CSS-Übergang für eine beliebige Eigenschaft endet.

Browserkompatibilität

Die oben genannten Ereignisse werden in verschiedenen Browsern gemäß den Spezifikationen im W3C CSS Transitions Draft und den jeweiligen Browserdokumentationen unterstützt.

Das obige ist der detaillierte Inhalt vonWie erkennt man den Anfang und das Ende von CSS3-Übergängen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!