js не анимируются элементы

155

25 марта 2021, 06:50

В моём скрипте функция анимирует появление блока на странице путём увеличения его высоты. Анимация реализована заменой класса элемента. Но блок не анимируется, а сразу переходит в конечное состояние. Другими словами анимация просто пропускается. Но если ввести команду замены класса элемента в консоль, то блок плавно появляется на странице, то есть всё работает так как нужно. Ниже представлены описание классов и фрагмент когда, который некорректно отрабатывает в скрипте. Подскажите пожалуйста возможные причины такого поведения элемента.

//Css
.disactive{
    padding: 0;
    max-height: 0;
}
.animate{
    max-height: 500px;
    padding: 15px 10px 15px 15px;
    transition-property: max-height, padding-top, padding-bottom, background-color;
    transition-duration: 1s;
}
//JS
document.querySelector('.disactive').classList.replace('disactive', 
'animate');

P.S. данный фрагмент когда выполняется в самом конце функции, и после него никакие другие функции не вызываются. То есть порядок выполнения этого фрагмента в скрипте и через консоль одинаков.

Answer 1

Проблема в том, что в DOM элемент попадает сразу с классом animate и ничего не знает про первоначальное состояние, все что нужно сделать - отложить добавление класса с анимацией

setTimeout(e => document.querySelector('.disactive') 
                        .classList.replace('disactive','animate'));

.disactive{ 
    padding: 0; 
    max-height: 0; 
    background-color:wheat; 
} 
 
.animate{ 
    max-height: 500px; 
    padding: 15px 10px 15px 15px; 
    background-color:red; 
    transition-property: max-height, padding-top, padding-bottom, background-color; 
    transition-duration: 1s; 
}