0
Ich versuche, die Erweiterung eines div mit flexibler Höhe zu animieren. Die Animation bewegt sich von der Höhe: 0px bis zur Zielhöhe. Allerdings notiere ich nicht die Zielhöhe. Deshalb habe ich gerade eine Höhe angenommen, die nahe der wirklichen Höhe ist. Das wirkt sehr schlecht, da ich die Höhe immer überbewerte oder unterschätze.expand div mit display: flex
.expandable {
background-color: red;
width: 200px;
display: flex;
flex-direction: column;
overflow: hidden;
animation-name: expand;
animation-duration: 1s;
animation-timing-function: ease-out;
}
@keyframes expand {
from {
height: 0px
}
to {
height: 100px
}
}<div class="expandable">
text
<br />text
<br/>text
<br />text
<br/>text
<br />text
<br/>text
</div>meine Geige Siehe: https://jsfiddle.net/gh3y1sbf/
, was ich möchte, ist zu sehen, dass die Animation auf die tatsächliche Zielhöhe des div glatt ist.
Irgendwelche Ideen wie das möglich ist? vorzugsweise ohne Javascript. Außerdem verwende ich JQuery nicht.
Seien Sie vorsichtiger Gedanke. Die Verwendung von max-height kann eine merkwürdige Verzögerung verursachen, wenn Sie ein kleines Menü mit einem großen max-height Wert haben. – Jackson
Und um "height" zu animieren, ist JavaScript erforderlich, richtig? – nncho
hmm, ich habe das funktioniert, allerdings müsste ich die maximale Höhe auf etwas höher als die tatsächliche Höhe setzen. also vorzugsweise zu etwas wirklich Hoch. Aber ich denke, das sollte gut funktionieren. Vielen Dank! – Christian