@Maks_Min

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

Есть аккордеон. Мне нужно, чтобы блок плавно выезжал и заезжал обратно.
Для этого написал такие стили:
.item {
	max-height: 1rem;
	overflow: hidden;
	transition: 0.5s ease;
	margin-bottom: 1rem;
	position: relative;

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


Убирается текст плавно, а вот появляется гораздо быстрее. При чем начинает заезжать вверх только когда иконка сделает анимацию(повернется). Как это можно исправить?
  • Вопрос задан
  • 88 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Блок анимируется на полные 100vh, даже когда он меньше.
Для корректного поведения, следует программно вычислять реальную высоту контента, и анимировать именно к этому значению, а не взятому от балды заведомо большому.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы