Quero que o elemento HTML se expanda para baixo e, no final, gostaria que ele desse um pequeno salto, algo que cubic-bezieruma função poderia fazer.
Então eu configurei transition: height ...em CSS para animar mudanças na heightpropriedade do elemento. No entanto, funciona apenas quando eu tenho height definido explicitamente, e não para 100vhconter apenas todos os elementos.
Para apresentar melhor, aqui estão alguns exemplos: quando o contêiner verde tem max-heightmenos que sua altura real (para conter seus filhos), então o efeito é visível e funciona. Mas então eu não confio no dimensionamento automático do contêiner para acomodar seus filhos.
Quando especifico algo "grande o suficiente" para acomodar todos os filhos possíveis, então, é claro, o "efeito de salto" não funciona, pois ele "salta" ao atingir a altura "grande o suficiente", tornando o efeito não visível.
Você pode observar o problema especificando alturas diferentes no snippet abaixo (3rem ou menos - funciona, 4 rem ou mais - não funciona).
function expand(){
let dropdown = document.getElementById('dropdown')
let height = dropdown.offsetHeight
let maxHeightInput = document.getElementById('maxHeightInput')
let maxHeight = maxHeightInput?.value ?? 0
dropdown.style.maxHeight = height > 0 ? 0 : maxHeight
}#dropdown {
background: lightgreen;
max-height: 3rem;
transition: max-height 0.4s cubic-bezier(.04,1.59,.83,1.18);
& > ul {
border: 1px solid black;
}
}<label>Green container expanded max height <input id='maxHeightInput' value='3rem' /></label><br>
<p>List of items is ~3rems tall.</p>
<button onclick={expand()}>Expand / collapse</button>
<div id='dropdown'>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
</div>A questão é como fazer esse efeito de salto funcionar no meu cenário: quando tenho um contêiner com filhos, e o contêiner é dimensionado dinamicamente com base em seus filhos.
