У меня добавляется два класса при клике на один объект. У одного класса при добавлении срабатывает анимация. Мне нужно после анимации добавлять второй класс. Думала что можно через settimeout сделать задержку в саму анимацию, но увы не вышло. Видимо из-за того, что попадают в even loop. Вот как это решить не понимаю.
На js добавляют так классы:
sectionAboutLinkEmail.addEventListener('click', () => {
container.classList.add('zoom');
popup.classList.add('popup_open');
});
Та самая анимация:
.zoom {
animation: zoom 1.5s ease-in;
animation-fill-mode: both;
}
@keyframes zoom {
0% {
opacity: 0.1;
transform: scale3d(0, 0, 0) translate3d(80vw, -30vw, 0);
}
100% {
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
}
У второго класса:
.popup_open {
opacity: 1;
z-index: 2;
}
