12 maj 2023

Jak animować wysokość od 0 do auto?

Mamy div który ma wysokość ustawioną na height: 0;. Po kliknięciu chcemy aby była "gładka" animacja pojawiąjącego się tekstu. Jest jeden problem, po toggle wysokość jest ustawiana na auto i zamiast "gładkiego" przejścia z wysokości 0 do auto, div po prostu się pojawia zamiast zwiększyć wysokość dynamicznie.
Powiesz, a czemu nie ustawić wysokości na konkretną "height i tutaj jest problem bo strona jest dynamiczna, więc wysokość tego diva z tekstem również jest dynamiczna.

Dobra najpierw pokażę jak to wygląda normalnie:

<button>Toggle</button>
<div class="expandable">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
  deserunt porro nostrum dignissimos eveniet aperiam harum! Illum et eos
  atque. Dolorem, dolor deleniti impedit quibusdam nobis numquam quae
  maiores itaque? Lorem ipsum dolor sit, amet consectetur adipisicing elit.
  Et harum, minus, odit impedit id soluta nostrum nemo repudiandae fugit
  voluptatum voluptatibus fugiat quas cupiditate necessitatibus sunt numquam
  adipisci libero, deserunt distinctio deleniti quo eligendi?
</div>