LabEx
LoginBeitreten

Glatte Übergänge dynamischer Höhen

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir untersuchen, wie man die Höhe eines Elements glatt von 0 auf auto überträgt, wenn die Höhe unbekannt ist. Diese Technik ist nützlich bei der Erstellung von Dropdown-Menüs, Akkorden und anderem animierten Inhalt. Indem wir die CSS-Eigenschaften transition, max-height und overflow sowie JavaScript verwenden, um den Höheswert dynamisch zu setzen, können wir eine nahtlose und visuell ansprechende Benutzererfahrung schaffen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Höhenübergang

index.html und style.css wurden bereits in der VM bereitgestellt.

Dieser Codeausschnitt überträgt die Höhe eines Elements von 0 auf auto, wenn die Höhe unbekannt ist, indem er die folgenden Schritte ausführt:

  • Verwenden Sie die transition-Eigenschaft, um anzugeben, dass Änderungen an max-height über eine Dauer von 0,3 s übergeben werden sollen.
  • Verwenden Sie die overflow-Eigenschaft, die auf hidden festgelegt ist, um zu verhindern, dass der Inhalt des versteckten Elements das Container überläuft.
  • Verwenden Sie die max-height-Eigenschaft, um eine Anfangshöhe von 0 anzugeben.
  • Verwenden Sie die :hover-Pseudoklasse, um die max-height auf den Wert der von JavaScript festgelegten --max-height-Variablen zu ändern.
  • Verwenden Sie die Element.scrollHeight-Eigenschaft und die CSSStyleDeclaration.setProperty()-Methode, um den Wert von --max-height auf die aktuelle Höhe des Elements zu setzen.
  • Hinweis: Dieser Ansatz verursacht bei jedem Animationsrahmen einen Neulayoutvorgang, was bei einer großen Anzahl von Elementen unterhalb des übergehenden Elements zu Verzögerungen führen kann.
<div class="trigger">
  Hover over me to see a height transition.
  <div class="el">Additional content</div>
</div>

.el {
  transition: max-height 0.3s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}

let el = document.querySelector(".el");
let height = el.scrollHeight;
el.style.setProperty("--max-height", height + "px");

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Höhenübergangslabor abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.