Как сделать плавное появление блока в аккордеоне?

Question

[Maks_Min]

Есть аккордеон. Мне нужно, чтобы блок плавно выезжал и заезжал обратно.
Для этого написал такие стили:

.item {
	max-height: 1rem;
	overflow: hidden;
	transition: 0.5s ease;
	margin-bottom: 1rem;
	position: relative;

	&.active {
		max-height: 100vh;
	}
}

Убирается текст плавно, а вот появляется гораздо быстрее. При чем начинает заезжать вверх только когда иконка сделает анимацию(повернется). Как это можно исправить?

Comments

[Ankhena]

а как это можно решить по-другому? брать этот элемент и джс-ом считать высоту говнокод получится в мое случае.

Ну почему говнокод? Нагуглите не говнокод :)

Answer 1

[Сергей delphinpro]

Блок анимируется на полные 100vh, даже когда он меньше.
Для корректного поведения, следует программно вычислять реальную высоту контента, и анимировать именно к этому значению, а не взятому от балды заведомо большому.

Comments

[Maks_Min]

у меня главный трабл в том, что сначала поворачивается иконка, а потом уже блок уезжает. какую бы я высоту не ставил. даже если удалить иконку, то он подождет условно 1с и потом заедет.

[hesrun]

Сергей delphinpro, прав. Нормально анимировать стилями вертикальное сворачивание не получится...
Если подключен jquery юзайте slideToggle(), если нету анимировать высоту, при этом заранее прописывать высоту блока.