Início / coding / Perguntas / 79305372
Accepted
Michał Turczyn
Asked: 2024-12-24 18:46:24 +0800 CST

"Efeito de salto" com cubic-bezier (ou similar), quando não há altura explícita para o elemento

  • 772

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.

javascript

2 respostas

  1. Se eu entendi sua pergunta corretamente, e é para animar a altura de um elemento pai com um efeito de salto, aqui está uma solução viável (que usa um código similar ao desta resposta relacionada: Animar altura de 0 a auto ) para criar um efeito de salto para seu pai recolhível.
    Ele usa evento delegado e um princípio de componente reutilizável em que o ID de destino é armazenado dentro do atributo data-* do botão:

    addEventListener("click", (evt) => {
  const elToggle = evt.target.closest("[data-toggle]");
  if (!elToggle) return;
  document.querySelector(elToggle.dataset.toggle).classList.toggle("expanded");
});
    .dropdown {
  > * {
    padding: 0; margin: 0;
    list-style: none;
    background: lightgreen;
    
    overflow: hidden;
    interpolate-size: allow-keywords;
    transition: height 0.4s cubic-bezier(0.04, 1.59, 0.83, 1.18);
    block-size: 0; /* Or also:  height: 0; */
  }

  &.expanded > * {
    block-size: auto; /* Or also:  height: auto; */
  }
}
    <button data-toggle="#dropdown-1" type="button">Expand / collapse</button>
<div class="dropdown" id="dropdown-1">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<button data-toggle="#dropdown-2" type="button">Expand / collapse</button>
<div class="dropdown" id="dropdown-2">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

    • 3
  2. Best Answer

    Já que você está usando JS de qualquer maneira, você pode alternar heightentre 0e scrollHeight:

    function expand() {
  const dropdown = document.getElementById('dropdown');
  dropdown.style.height = dropdown.offsetHeight > 2 ? 0 : dropdown.scrollHeight + 'px'
}
    #dropdown {
  background: lightgreen;
  height: 0;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(.04, 1.59, .83, 1.18);
  border: 1px solid black;
}
    <button onclick="expand()">Expand / collapse</button>
<div id='dropdown'>
  <ul>
    <li>Item 1
    <li>Item 2
    <li>Item 3
  </ul>
</div>

    • 1

relate perguntas