Как сделать плавную анимацию?

Question

[zeni1agent]

у меня есть вот такой код

.but{
  background:#f00;
  width:50px;
  height:50px;  
}

.but:hover ~ .content{ 
transition: 3s;
max-height:10000px;
}

.content{
display:flex;
flex-direction: column;
overflow:hidden;
max-height:0px;  
transition: 3s;
}

<div class="back">
  <div class="but"></div>
  <div class="content">
    <a>gort</a>
    <a>gort</a>
    <a>gort</a>
    <a>gort</a>
    <a>gort</a>
    <a>gort</a>
    <a>gort</a>
    <a>gort</a> 
  </div>
</div>

пример
Проблема в том что при долгом удерживание but анимация получается дерганой
Можно ли это как то исправить если параметр height неизвестен ?

Comments

[Виталий Першин]

Поставь max-height:1000px; вместо 10000

[zeni1agent]

Qlink, Заедание происходит когда долго держишь мышку на кнопке.
Это происходит изо того что max-height разворачивается дальше до 10000px; и когда ты убираешь мышку, анимация просто не успевает свернутся плавно.

Answer 1

[KononovD]

можно в js задавать max-height вручную. свойство "scrollHeight" вернет полную высоту элемента независимо от стилей