Возможно ли добавить плавность в данной ситуаций?

Question

[DeniSidorenko]

Привет, сделал простой аккордеон.

<div class='item'>
<div class='submenu'></div>
</div>

Логика простая, submenu скрыто, при клике на item, добавляется класс active и в стилях item.active{ display block}. Только нету совсем анимации. Возможно ли как то тут ее добавить? Либо стоит изменить сили как то?

Answer 1

[vladimir_html]

дык на jq есть slideToggle)

Answer 2

[Максим Тимофеев]

используйте keyframes

Answer 3

[Святослав]

Сделай:

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: 0.2s (вот это и отвечает за анимацию)
}
.active {
  max-height: 30px;
  transition: 0.2s
}

Проблема этого метода, что надо заранее знать высоту контента внутри.
Иначе если поставить max-height больший чем свой контент, то можно заметить задержки в анимации.
Никаких jq в анимациях не надо использовать.

Answer 4

[mdss]

добавьте функцию анимации. Например

@keyframes fadeIn {
from {opacity:0}
to {opacity:1}
}

использование

.submenu--active {
display:block;
animation:fadeIn .5s;
}