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

Question

[GAS-ART]

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

<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/

Answer 1

[Сергей delphinpro]

Потому что начальное значение - auto. Нужно указывать конкретные значения в начальном и конечном состоянии для высоты. Тогда будет работать.

Comments

[GAS-ART]

Спасибо. Добавил в css

.menu__sub-list{
  height: 72px;
  overflow:hidden;
}

И все заработало

[Сергей delphinpro]

Артем, Добавите пункты в меню - и придется менять значение высоты. Лучше используйте

{
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: transform 1s ease;
}
:hover {
  transform: scale(1);
}

[GAS-ART]

Спасибо, так и сделаю.