Warum funktioniert mein CSS-Übergang nicht bei ausgeblendeten Elementen?

CSS-Übergang funktioniert zunächst nicht bei ausgeblendeten Elementen

Beim Versuch, die Eigenschaft eines ausgeblendeten Elements mithilfe von CSS-Übergängen zu animieren, kann es zu einem Problem kommen Problem, bei dem das Element sofort an seiner endgültigen Position angezeigt wird. Dies liegt an der Beziehung zwischen dem CSS Object Model (CSSOM) und dem Document Object Model (DOM).

Die Rolle von Reflow und CSSOM

CSS-Übergänge bestimmen ihren Anfangszustand basierend auf den berechneten Stilen eines Elements. Wenn ein Element jedoch display:none hat, ignoriert der Browser seine berechneten Stile, da das Element für das CSSOM praktisch unsichtbar ist.

Wenn Sie in Ihrem Szenario den Übergang auf .b auslösen, hat es keinen berechneten Stil , da es versteckt ist. Daher kann der Übergang nicht ordnungsgemäß initialisiert werden.

Erzwingen eines Reflows

Um dieses Problem zu lösen, können Sie den Browser zwingen, die berechneten Stile des ausgeblendeten Elements vor dem Start zu aktualisieren der Übergang. Dies geschieht durch Auslösen eines Reflows.

Reflow ist der Prozess, bei dem der Browser das Layout und die berechneten Stile der gesamten Seite neu berechnet. Dies kann durch bestimmte DOM-Methoden oder bei Bedarf durch den Browser selbst ausgelöst werden, beispielsweise wenn der Bildschirm aktualisiert wird.

Mit der requestAnimationFrame()-API können Sie den Browser auffordern, kurz vor dem nächsten Malen einen Reflow durchzuführen Der Vorgang erfolgt. Dadurch wird sichergestellt, dass die berechneten Stile Ihres Elements auf dem neuesten Stand sind, wenn der Übergang beginnt.

Aktualisierter Code

$('button').on('click', function () {
  $('.b').show(); // Apply display:block synchronously

  requestAnimationFrame(() => {
    // Force a reflow
    document.body.offsetHeight;

    // Trigger the transitions
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
})

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