Übergangshöhe in CSS

1. Verwendung von die Eigenschaft transition Mit den Eigenschaften max-height und overflow zu Transition Height in CSS
2. Verwendung von die Eigenschaft transform mit transition zur Übergangshöhe in CSS

Dieser Artikel stellt einige Methoden vor, um einen Übergang auf die Höhe eines Elements in CSS anzuwenden.

Verwendung von die Eigenschaft transition Mit den Eigenschaften max-height und overflow zu Transition Height in CSS

Ein Übergang ist eine weit verbreitete Eigenschaft, um einen Eigenschaftswert über eine bestimmte Dauer hinweg sanft zu ändern. Der Übergang kann auch als Animation bezeichnet werden.

Der Übergang hat bestimmte Eigenschaften wie transition-property, transition-duration, transition-timing-function und transition-delay. Die transition-property definiert, welche CSS-Eigenschaft durch den Übergangseffekt verändert wird.

Die transition-duration definiert, wie lange es dauern soll, bis der Übergang abgeschlossen ist, d.h. Zeit in Sekunden. Die transition-timing-function definiert, wie der Übergang ablaufen soll, d.h. welche Wirkung der Übergang erhält.

Die transition-timing-function kann ease, ease-in, ease-out, linear, ease-in-out usw. haben. Die Eigenschaft transition-delay gibt an, wie viel Zeit es dauern sollte, um einen Übergang zu starten.

Wir können diese Eigenschaften kombinieren und eine Übergangs-Kurzschrifteigenschaft wie folgt verwenden.

transition: height 2s linear 1s;

Hier bezeichnet height die Eigenschaft transition-property, 2s definiert transition-duration, linear spezifiziert die transition-timing-function, und 1s definiert transition-delay.

Wir können transition zusammen mit der Eigenschaft max-height verwenden, um die Höhe eines Elements von 0 auf auto zu setzen. Wir können auf Text zeigen, um die Höhe eines bestimmten HTML-Elements zu ändern.

Wir können die Eigenschaft overflow:hidden verwenden, um die überlaufenden Elemente auszublenden, wenn die max-height auf 0 gesetzt ist.

Erstellen Sie beispielsweise ein div und geben Sie ihm die ID main. Erstellen Sie innerhalb dieses div ein Absatz-Tag p und schreiben Sie Hover Me.

Erstellen Sie als Nächstes eine ungeordnete Liste mit dem Tag ul und geben Sie ihr eine ID von items. Erstellen Sie mit dem Tag li einige Listenelemente innerhalb von ul.

Wählen Sie in CSS die ID items und setzen Sie max-height auf 0. Es stellt sicher, dass die Elemente innerhalb von ul nicht angezeigt werden.

Als nächstes setzen Sie die Eigenschaft background auf Grau. Setzen Sie die Eigenschaft overflow auf hidden.

Es wird die überlaufenden ul-Elemente ausblenden, wenn die max-height 0 ist. Danach setzen Sie die transition-Eigenschaft auf max-height 0.15s ease-out.

Es verleiht den Listenelementen einen ease-out-Effekt, während Sie den Mauszeiger darüber bewegen.

Verwenden Sie den :hover-Selektor, um die main-ID auszuwählen, und wählen Sie anschließend die items-ID aus. Setzen Sie dann den Wert von max-height auf 500px.

Infolgedessen passt es seine Höhe automatisch an die ul-Elemente an, wenn die Bildschirmgröße weniger als 500 Pixel beträgt. Stellen Sie dann die Übergangseigenschaft auf transition: max-height 0.25s ease-in;.

Dadurch wird die Höhe des ul innerhalb von 0.25 Sekunden auf automatisch mit dem ease-in-Effekt eingestellt.

Das folgende Beispiel zeigt, dass die ungeordnete Liste angezeigt wird, während man mit der Maus über den Text mit Effekt fährt. Und die ungeordnete Liste wird beim Schweben aus dem Text ausgeblendet.

<div id="main">
 <p>Hover Me</p>
 <ul id="items">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 </ul>
 </div>

#main #items {
 max-height: 0;
 transition: max-height 0.15s ease-out;
 overflow: hidden;
 background: gray;
}
#main:hover #items {
 max-height: 500px;
 transition: max-height 0.25s ease-in;
}

Verwendung von die Eigenschaft transform mit transition zur Übergangshöhe in CSS

Die Eigenschaft transform wird für die 2D- oder 3D-Transformation eines Elements verwendet. Diese Eigenschaft kann Werte wie rotate, scale, skew, move, translate usw. annehmen.

In diesem Tutorial werden wir scale verwenden, um die Höhe eines Elements zu ändern. Und wir werden auch die Eigenschaft transition verwenden, um eine Animation zu erstellen, während die Höhenänderung auftritt.

Die Eigenschaft scale wird verwendet, um die Größe des Elements zu ändern. Wir können scale in der X-Achse verwenden, indem wir scaleX verwenden und in der Y-Achse skalieren, indem wir scaleY verwenden.

Hier werden wir scaleY verwenden, um die Höhe des Elements zu ändern, was vertikal (entlang der Y-Achse) erfolgen sollte. Der Wert scaleY(1) gibt an, dass die Höhe eines Elements 100% beträgt, und der Wert scaleY(0) gibt an, dass die Höhe eines Elements 0 % beträgt.

Es gibt eine Eigenschaft namens transform-origin. Sein Wert sagt uns, wo die Transformation beginnen soll.

Da wir die Höhe von oben nach unten erweitern wollen, indem wir die Höhe von 0 auf auto erhöhen, können wir den Wert von transform-origin auf top setzen. Wenn wir über ein Element schweben, können wir den Wert von transform auf scaleY(1) setzen, um seine Höhe auf auto zu setzen.

Wir werden dieselbe HTML-Vorlage verwenden, die in der ersten Methode für die Demonstration verwendet wurde.

Wählen Sie beispielsweise die ID items so aus, dass #main #items und die Stile anwenden. Stellen Sie die Hintergrundfarbe auf Grau.

Als nächstes setzen Sie die Eigenschaft transform auf scaleY(0). Damit wird die Höhe des Elements auf 0 gesetzt.

Setzen Sie dann die Eigenschaft transform-origin auf top, da die Transformation von oben nach unten beginnen soll. Wenden Sie dann die Stile transform 0.3s ease für die Eigenschaft transition an.

Hier gibt transform die Eigenschaft an, wo die Animation beim Schweben stattfinden soll. Die 0.3 s geben die Zeit an, die zum Abschließen der Animation benötigt wird.

Das ease zeigt die transition-timing-function an, was bedeutet, dass die Animation stattfinden soll. Setzen Sie schließlich die Eigenschaft transform mit dem Selector : hover auf scaleY(1).

Wenn wir das div bewegen, erhöht sich die Höhe des ul, wenn sich der Wert von transform von scaleY(0) auf scaleY(1) ändert.

Beispielcode:

<div id="main">
 <p>Hover Me</p>
 <ul id="items">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 </ul>
 </div>

#main #items {
 background-color: gray;
 transform: scaleY(0);
 transform-origin: top;
 transition: transform 0.3s ease;
}
#main:hover #items {
 transform: scaleY(1);
}