@urajo

Как применить css анимацию при добавление класса через js?

Хочу что бы при добавление класса show - блок плавно увеличивался по высоте, как это сделать?
Пытался прописать классу transition, не понимаю почему не срабатывает. Блок просто открывается и закрывается.
document.querySelector('#event__button').addEventListener('click', function(event){
		if(event.currentTarget.dataset.status == 'hide'){
			event.currentTarget.dataset.status = 'show';
			document.querySelector('.event__list').classList.toggle('event__list_show');
		}else{
			event.currentTarget.dataset.status = 'hide';
			document.querySelector('.event__list').classList.toggle('event__list_show');
		}
	});

.event__list{
  display: flex;
  flex-wrap: wrap;
  height: 700px;
  margin-bottom: 52px;
  overflow: hidden;
  transition: height 0.3s ease;
}

.event__list_show{
  height: 100%;
}
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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