Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
CSS transition: Höhe von 0 auf Auto animieren Workaround
Eine Höhe von 0 zu Auto animieren ist eine Sache, die man bestimmt öfter mal tun möchte. Mit CSS transitions merkt man schnell, dass das nicht klappen will. Aber es gibt noch Hoffnung! Man kann max-height und overflow:hidden benutzen, um das Ganze zu bewerkstelligen.
Hier mal ein Beispiel: (Hover)
Dies ist ein Text beliebiger Länge und somit Höhe.
Also wie funtioniert das Ganze jetzt? Wir animieren nicht die Höhe von 0 auf auto, sondern die max-height. Das funktioniert so, dass wir dem zu animierenden Element eine maximale Höhe geben, die größer ist, bzw gleich groß der Box in der es liegt. Die Box darum muss also eine Höhe haben und benötigt overflow hidden.
HTML Aufbau
<div class="outer-box">
<div class="inner-box-content">
<p>Dies ist ein Text beliebiger Länge und somit Höhe.</p>
</div>
</div>Der abgespeckte CSS-Code
.inner-box-content {
/* Anfangs wollen wir keine Höhe, es soll ja nicht sichtbar sein*/
max-height: 0;
overflow: hidden;
/* Set our transitions up. */
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
.outer-box:hover .inner-box-content {
/* Bei hover, muss die Höhe auf irgendeinen großen Wert gesetzt werden */
max-height: 200px;
}
Kommentare
Hat diese dynamischen Content oder ändert sich die Box in einer Full-Responsive Umgebung funktioniert es nicht.
Man kann natürlich die Höhe auch einfach auf 10000px setzen, aber dann läuft die Animation nicht mehr so ab wie man es gerne hätte, da diese ja dann großteils im nicht sichtbaren Bereich abgespielt wird.
Gute Ansatz, aber leider löst es nicht alle Probleme.
Viele Grüße,
Jannick
Hinterlasse einen Kommentar