Warum schlagen Elementübergänge fehl, wenn sie zunächst ausgeblendet werden?

Elementübergänge schlagen fehl, wenn sie anfänglich ausgeblendet werden

Szenarioübersicht

Betrachten Sie zwei Elemente mit der Bezeichnung „ A‘ und ‚B‘, wobei ‚B‘ zunächst mit display: none ausgeblendet wird. Wenn Sie Übergänge verwenden, um „B“ zu animieren, nachdem Sie es mit Methoden wie $.show() oder $.toggle() angezeigt haben, erscheint das Element sofort an seiner endgültigen Position ohne Animation.

Erklärung

Die Ursache liegt in der Beziehung zwischen dem Document Object Model (DOM) und dem CSS Object Model (CSSOM). CSS-Übergänge basieren auf dem zuletzt berechneten Wert eines Elements. Für ursprünglich ausgeblendete Elemente ist der berechnete Wert display: none, wodurch das Element im Wesentlichen aus dem CSSOM entfernt wird.

DOM-Manipulation und Reflow

Die DOM-Manipulationsphase umfasst die Aktualisierung ein JavaScript-Objekt, bei dem es sich um einen asynchronen Prozess handelt. Im Gegensatz dazu findet die Reflow-Phase, in der CSS-Regeln aktualisiert und berechnete Stile neu berechnet werden, nur bei Bedarf statt. Da anfänglich ausgeblendete Elemente keine berechneten Stile haben, lösen sie während der DOM-Manipulation keinen Reflow aus.

Anfangszustand des Übergangs

Wenn der Übergang für „ B' startet, der Anfangszustand ist nicht definiert, da der Reflow noch nicht stattgefunden hat. Dies kann zu falschen Übergängen führen.

Reflow erzwingen

Um dieses Problem zu beheben, können Sie einen Reflow erzwingen, bevor Sie den Übergang auslösen. Sie können dies mit Element.getBoundingClientRect() oder element.offsetHeight erreichen, die aktuelle berechnete Werte erfordern und daher einen Reflow erzwingen.

Verbessertes Beispiel mit Force Reflow

Hier ist ein überarbeiteter Codeausschnitt, der einen Reflow erzwingt, bevor er animiert wird Übergang:

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

  requestAnimationFrame(() => { // wait just before the next paint
    document.body.offsetHeight; // force a reflow
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
});

Indem Sie einen Reflow erzwingen, bevor der Übergang ausgelöst wird, stellen Sie sicher, dass die berechneten Werte aktuell sind, sodass der Übergang ordnungsgemäß funktioniert.

Das obige ist der detaillierte Inhalt vonWarum schlagen Elementübergänge fehl, wenn sie zunächst ausgeblendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!