Gavr_Gavr
@Gavr_Gavr

Почему css свойство height не анимируется?

Есть такой простой код

<ul class="menu__list">
								<li class="menu__item"><a href="#" class="menu__link">Product</a><button type="button"
										class="header__button"></button>
									<ul class="menu__sub-list">
										<li class="menu__sub-list-item"><a href="#" class="menu__sub-link">Product №1</a></li>
										<li class="menu__sub-list-item"><a href="#" class="menu__sub-link">Product №2</a></li>
										<li class="menu__sub-list-item"><a href="#" class="menu__sub-link">Product №3</a></li>
										<li class="menu__sub-list-item"><a href="#" class="menu__sub-link">Product №4</a></li>
									</ul>
								</li>


const menuBtn = document.querySelector('.header__button');

 menuBtn.addEventListener('click', function (e) {
 let targetMenuItem = e.target.closest('.menu__item');
 
 targetMenuItem.classList.toggle("active");
 });


.header__button{
  width: 50px;
  height:50px;
}
.menu__item.active .menu__sub-list{
  height: 0px;
  overflow:hidden;
/*  transform: translate(0px, 200px); */ 
  
}
.menu__item .menu__sub-list{
  transition: height 5s ease 0s;
 /*  transition: transform 5s ease 0s;*/ 
}


Свойство translate (закомментированное) анимируется. Свойство height сразу схлопывается без анимации. Почему так происходит?

Вот код на jsfidle
https://jsfiddle.net/mu0Ly6gt/36/
  • Вопрос задан
  • 532 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Потому что начальное значение - auto. Нужно указывать конкретные значения в начальном и конечном состоянии для высоты. Тогда будет работать.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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