Glatter Höhenübergang | CSS Animation | Webentwicklung

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") css/DynamicStylingGroup -.-> css/transitions("Transitions") css/CSSPreprocessorsGroup -.-> css/variables("Variables") css/CSSPreprocessorsGroup -.-> css/nesting("Nesting") subgraph Lab Skills css/selectors -.-> lab-35207{{"Glatte Übergänge dynamischer Höhen"}} css/width_and_height -.-> lab-35207{{"Glatte Übergänge dynamischer Höhen"}} css/pseudo_classes -.-> lab-35207{{"Glatte Übergänge dynamischer Höhen"}} css/mobile_first_design -.-> lab-35207{{"Glatte Übergänge dynamischer Höhen"}} css/transitions -.-> lab-35207{{"Glatte Übergänge dynamischer Höhen"}} css/variables -.-> lab-35207{{"Glatte Übergänge dynamischer Höhen"}} css/nesting -.-> lab-35207{{"Glatte Übergänge dynamischer Höhen"}} end

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.