Heim > Artikel > Web-Frontend > Wie stelle ich die Übergangshöhe mithilfe von CSS von 0 auf automatisch ein?
Wie stelle ich die Übergangshöhe mithilfe von CSS von 0 auf automatisch ein?
- WBOYnach vorne
- 2023-09-18 12:29:021617Durchsuche
Der Übergang der Höhe von 0 auf „Auto“ ist eine Möglichkeit, die Höhe eines Elements sanft zu animieren, wenn es sich an seinen Inhalt anpasst. In der Webentwicklung kann die Schaffung sanfter und eleganter Übergänge eine Website attraktiver machen und ein besseres Benutzererlebnis bieten. Allerdings kann es etwas schwierig sein, einen Übergang von Höhe 0 zu „Auto“ zu erstellen.
Grammatik
transition: [property] [duration] [timing-function] [delay];
Hier ist property die CSS-Eigenschaft, die wir animieren möchten, duration ist die Zeitspanne, in der der Übergang enden soll, timing-function gibt die Zeitkurve oder Geschwindigkeit des Übergangs an, die bestimmt, wie die Animation abläuft beschleunigt mit der Zeit oder verlangsamt sich, während Verzögerung ein optionaler Parameter ist, der die Wartezeit vor Beginn des Übergangs festlegt.
Übergangshöhe
In CSS ist ein Übergang eine Möglichkeit, eine sanfte, dynamische Animation zwischen zwei Zuständen eines Elements zu erstellen. Konkret bezieht sich die Übergangshöhe auf den Animationseffekt, der auftritt, wenn sich das Höhenattribut eines Elements ändert, wodurch das Benutzererlebnis verbessert und die Website attraktiver wird.
Zum Beispiel, wenn wir beim Erweitern oder Reduzieren eines Divs oder beim Umschalten der Sichtbarkeit eines Dropdown-Menüs einen reibungslosen Übergang schaffen möchten. Wir können dies ganz einfach mithilfe von CSS-Übergangseigenschaften und der Höheneigenschaft tun,
Animationshöhe von 0 bis „Auto“
Wenn wir einen Übergang von Höhe 0 zu „Auto“ erstellen möchten, ist es nicht so einfach, einfach die Höheneigenschaft auf „Auto“ zu setzen. Tatsächlich ist der Wert „auto“ kein gültiger Wert für CSS-Transformationen. Wir können dies tun, indem wir die folgenden Schritte ausführen.
Schritt 1: HTML-Struktur erstellen
Um einen Übergang zu erstellen, benötigen wir zunächst ein HTML-Element, auf das wir ihn anwenden können. Lassen Sie uns ein div mit der Klasse „element“ verwenden.
Zum Beispiel -
<div class="element"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Nulla faucibus nisi nec ullamcorper finibus.</p> </div>
Schritt 2: CSS hinzufügen
Nachdem wir die HTML-Struktur erstellt haben, müssen wir etwas CSS hinzufügen, um Übergänge zu erstellen. Wir setzen zunächst die Anfangshöhe der Klasse „element“ auf 0 und blenden den Überlauf aus.
Zum Beispiel -
.element {
height: 0;
overflow: hidden;
}
Dadurch wird der Inhalt im Element ausgeblendet, bis er erweitert wird.
Schritt 3: Übergang hinzufügen
Jetzt müssen wir dem Element Übergangsattribute hinzufügen. Wir verwenden das Höhenattribut und legen die Dauer- und Timing-Funktionen fest.
Zum Beispiel -
.element {
height: 0;
overflow: hidden;
transition: height 0.5s ease-in-out;
}
In diesem Beispiel dauert der Übergang 0,5 Sekunden und es wird die Ease-out-Timing-Funktion verwendet, was bedeutet, dass der Übergang schnell beginnt und am Ende langsamer wird.
Schritt 4: Erweiterten Status festlegen
Um den erweiterten Zustand des Elements festzulegen, verwenden wir hier eine Pseudoklasse und setzen die Höhe auf „Auto“.
input[type="checkbox"]:checked~.element {
height: auto;
}
Beispiel 1
Hier ist ein Beispiel für die Verwendung von CSS zum Festlegen der Übergangshöhe von 0 auf automatisch.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
.element {
height: 0;
overflow: hidden;
transition: height 0.5s ease-in-out;
}
input[type="checkbox"]:checked~.element {
height: auto;
}
p { margin: 0;}
</style>
</head>
<body>
<h3>Transitioning height 0 to auto using CSS</h3>
<input type="checkbox" id="toggle">
<label for="toggle">Toggle Element</label>
<div class="element">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nulla faucibus nisi nec ullamcorper finibus.</p>
</div>
</body>
</html>
Beispiel 2
Hier ist ein weiteres Beispiel für die Verwendung von CSS zum Festlegen der Übergangshöhe von 0 auf automatisch.
<!DOCTYPE html>
<html>
<head>
<style>
body{ text-align:center;}
.box {
max-height: 0;
width:200px;
margin:auto;
transition: max-height 1.4s ease-out;
overflow: hidden;
background: #b2ceed;
}
.tab:hover .box {
max-height: 500px;
transition: max-height 1s ease-in;
}
</style>
</head>
<body>
<h2>Transition height 0 to auto using CSS </h2>
<div class="tab"><b>Hover on me to increase the height.</b>
<div class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</div>
</body>
</html>
Fazit
Das Erstellen eines Übergangs von 0 auf automatisch mithilfe von CSS ist eine einfache und effektive Möglichkeit, Ihrer Website visuelles Interesse zu verleihen. Indem wir die in diesem Artikel beschriebenen Schritte befolgen, können wir diesen Effekt ganz einfach erzielen und das Benutzererlebnis auf unserer Website verbessern.
Das obige ist der detaillierte Inhalt vonWie stelle ich die Übergangshöhe mithilfe von CSS von 0 auf automatisch ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!