Wie stelle ich die Übergangshöhe mithilfe von CSS von 0 auf automatisch ein?-CSS-Tutorial-php.cn

Wie stelle ich die Übergangshöhe mithilfe von CSS von 0 auf automatisch ein?

WBOY

Freigeben： 2023-09-18 12:29:02

nach vorne

1652 Leute haben es durchsucht

Wie stelle ich die Übergangshöhe mithilfe von CSS von 0 auf automatisch ein?

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];

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!