Как выполнить действие по завершению добавления стиля?

Question

[Nick Bukovskiy]

Допустим:

drawer.style.display = 'block';
drawer.classList.add('active');

Тут проблема в том, что класс добавляется мометально после того, как элемент стал display: block и CSS анимация не срабатывает. Это можно исправить таким способом:

drawer.style.display = 'block';
    setTimeout(() => {
      drawer.classList.add('active');
    }, 1);

Но мне кажется, что есть более "правильный" способ для этого. Как мне это реализовать более "правильно"?

Comments

[Arman]

можно попробовать анимацией самого CSS

Answer 1

[hzzzzl]

в css добавить transition-delay, чтобы не сразу анимация начиналась?
https://developer.mozilla.org/en-US/docs/Web/CSS/t...

Comments

[Nick Bukovskiy]

Я думал об этом, но тогда проблема с тем, когда нужно убрать клас active. Тогда анимация будет происходить тоже с зажержкой. А это уже плохо

[hzzzzl]

Nick Bukovskiy,
drawer.style.display = 'block';
а что там до этого, display: none?
может вместо этого замутить что-то с opacity: 0; pointer-events: none, а опасити будет анимироваться, в отличие от дисплея? тогда будет добавляться и анимация и видимость элемента сразу

Answer 2

[nvdfxx]

https://www.w3schools.com/jsref/event_animationend.asp