Warum funktionieren CSS-Übergänge nicht bei versteckten Elementen?

CSS-Übergang wird für ausgeblendete Elemente nicht ausgelöst

In der Webentwicklung werden häufig CSS-Übergänge verwendet, um Änderungen an den Eigenschaften eines Elements zu animieren. Ein häufiger Stolperstein besteht jedoch darin, dass ein Element zunächst ausgeblendet ist (z. B. mit display: none) und dann sichtbar wird, der CSS-Übergang jedoch nicht aktiviert wird.

Hinter den Kulissen mit CSSOM und DOM

Um dieses Verhalten zu verstehen, müssen wir die Beziehung zwischen dem CSS Object Model (CSSOM) und dem Document Object Model (DOM) betrachten. Das DOM stellt die HTML-Struktur der Seite dar, während das CSSOM die berechneten Stile für jedes Element darstellt.

Während des Rendervorgangs erfolgen zuerst DOM-Manipulationen (z. B. das Ändern der Anzeigeeigenschaft). Anschließend berechnet der Browser die berechneten Stile (CSSOM) für alle Elemente auf der Seite neu, was als Reflow oder Layout bezeichnet wird. Abschließend werden die Änderungen visuell auf dem Bildschirm gerendert (Farbe).

Auswirkungen auf CSS-Übergänge

CSS-Übergänge erfordern den anfänglich berechneten Stil des Elements, um den Start zu berechnen Zustand. Bei ausgeblendeten Elementen sind die berechneten Stile jedoch im Wesentlichen null, da sie nicht angezeigt werden. Das bedeutet, dass beim Auslösen eines Übergangs der Anfangszustand für jeden übertragbaren Wert ungültig ist.

Lösungen

Um dieses Problem zu beheben, können Sie eine der folgenden Methoden verwenden Ansätze:

• Reflow erzwingen:Verwendung von requestAnimationFrame oder anderen Methoden, die einen Reflow auslösen Der Browser berechnet die berechneten Stile neu. Indem Sie kurz vor dem Auslösen des Übergangs einen Reflow aufrufen, stellen Sie sicher, dass die berechneten Stile aktuell sind.
• Verwenden Sie $.animate()**: .animate() intern erzwingt einen Reflow, indem es eine DOM-Manipulation auslöst und dann einen Rückruf plant, um den Übergang auszulösen. Dieser Ansatz ist jedoch normalerweise langsamer als die Verwendung einer direkten Reflow-Methode.

Beispiel

Der folgende Codeausschnitt zeigt, wie ein Reflow mithilfe von requestAnimationFrame erzwungen wird:

$('button').on('click', function() {
  $('.b').show(); // Show the hidden element

  requestAnimationFrame(() => { // Force a reflow
    // Trigger the transitions
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
});

Durch die Verwendung von requestAnimationFrame stellen wir sicher, dass der CSS-Übergang erfolgreich ausgelöst wird, auch wenn er zunächst ausgeblendet ist Elemente.

Das obige ist der detaillierte Inhalt vonWarum funktionieren CSS-Übergänge nicht bei versteckten Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!