Wie kann ich den Abschluss eines CSS-Übergangs erkennen?

Rückruf bei CSS-Umstellung

Frage:

Ist es möglich, wann eine Benachrichtigung zu erhalten? ein CSS-Übergang hat abgeschlossen?

Antwort:

Ja, sofern vom Browser unterstützt, wird ein Ereignis ausgelöst, wenn der Übergang endet. Das spezifische Ereignis variiert jedoch je nach Browser:

• Webkit-Browser (Chrome, Safari): webkitTransitionEnd
• Firefox: Transitionend
• IE9: msTransitionEnd
• Oper: oTransitionEnd

Zusätzliche Überlegungen:

• webkitTransitionEnd wird möglicherweise nicht immer ausgelöst, insbesondere wenn die Animation keine Auswirkung auf das Element hat.
• Ein Timeout-Fallback wird empfohlen, um sicherzustellen, dass der Event-Handler aufgerufen wird, falls das Event nicht ausgelöst wird erwartet.

Codebeispiel:

const transitionEndEventName = "XXX"; // Determine the appropriate event name
const elemToAnimate = ...; // Element to animate
let done = false;
const transitionEnded = () => {
  done = true;
  // Transition finished actions
  elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false);

// Trigger animation

setTimeout(() => {
  if (!done) {
    console.log("Timeout required to call transition ended.");
    transitionEnded();
  }
}, XXX); // Replace XXX with animation duration plus a grace period

Hinweis:

• Das Ende des Übergangsereignisses Der Name kann mit der Methode abgerufen werden, die in der Antwort auf „Wie normalisiere ich CSS3-Übergangsfunktionen in allen Browsern?“ beschrieben wird.
• Dies Das Problem hängt auch mit „CSS3-Übergangsereignissen“ zusammen.

Das obige ist der detaillierte Inhalt vonWie kann ich den Abschluss eines CSS-Übergangs erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!