Warum funktioniert der CSS-Übergang nicht bei ursprünglich ausgeblendeten Elementen?

CSS-Übergang funktioniert nicht bei anfänglich ausgeblendeten Elementen

Wenn ein Element anfänglich mithilfe der CSS-Anzeige ausgeblendet wird: Keine, es werden keine CSS-Übergänge darauf angewendet wird nicht ausgelöst, wenn seine Sichtbarkeit geändert wird. Dies liegt daran, dass CSS-Übergänge auf dem ursprünglich berechneten Stil des Elements basieren, der für ein ausgeblendetes Element leer ist.

CSSOM vs. DOM

Um dieses Verhalten zu verstehen, Es ist wichtig, zwischen dem CSS Object Model (CSSOM) und dem Document Object Model (DOM) zu unterscheiden. Das DOM stellt die hierarchische Struktur des HTML-Dokuments dar, während das CSSOM die berechneten Stile für jedes Element enthält.

Reflow und Paint

Wenn die Sichtbarkeit eines Elements ist geändert hat, muss der Browser das CSSOM aktualisieren und die Seite umfließen lassen, um die Änderungen widerzuspiegeln. Reflow berechnet die berechneten Stile und Positionen von Elementen basierend auf ihren CSS-Regeln neu. Beim Malen handelt es sich um den Vorgang des Renderns der Seite auf dem Bildschirm, der nach dem Reflow erfolgt.

Übergangsinitiierung

CSS-Übergänge funktionieren durch Interpolation zwischen dem ursprünglich berechneten Stil des Elements und seinem endgültiger Stil. Wenn ein Element anfänglich ausgeblendet ist, ist sein berechneter Stil leer, sodass der Übergangsalgorithmus den Anfangszustand nicht erstellen kann.

Lösung: Reflow erzwingen

Um den Übergang auszulösen Bei einem ausgeblendeten Element ist es erforderlich, einen Reflow zu erzwingen, nachdem seine Sichtbarkeit geändert wurde. Dies kann mithilfe der requestAnimationFrame-API erreicht werden, die einen Rückruf ausführt, kurz bevor der Browser die Seite zeichnet.

Durch die Verwendung von requestAnimationFrame ist es möglich, den CSS-Übergang anzuwenden, nachdem der Browser das CSSOM aktualisiert hat, wodurch der Übergang ermöglicht wird um richtig zu starten.

Beispiel

Hier ist eine modifizierte Version Ihres Codes mit requestAnimationFrame, um einen Reflow zu erzwingen:

$('button').on('click', function() {
  $('.b').show();

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

Zusammenfassend lässt sich sagen, dass CSS-Übergänge bei ursprünglich ausgeblendeten Elementen nicht funktionieren, da das CSSOM keinen anfänglich berechneten Stil für sie enthält. Um den Übergang auszulösen, ist es notwendig, einen Reflow zu erzwingen, nachdem die Sichtbarkeit des Elements geändert wurde.

Das obige ist der detaillierte Inhalt vonWarum funktioniert der CSS-Übergang nicht bei ursprünglich ausgeblendeten Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!