How to perform an action on completion of the addition of style?

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

Here the problem is that the class is added momentalno after the element was display: block and CSS animation does not work. This can be corrected this way:
drawer.style.display = 'block';
 setTimeout(() => {
drawer.classList.add('active');
 }, 1);

But it seems to me that there is a "right" way to do this. How can I implement this more "correctly"?
April 3rd 20 at 18:48
2 answers
April 3rd 20 at 18:50
in css add transition-delay, so immediately the animation began?
https://developer.mozilla.org/en-US/docs/Web/CSS/t...
I thought about it, but then the problem with that is when you need to remove the class active. Then the animation will happen too zagariai. And this is bad - gregg_Torphy commented on April 3rd 20 at 18:53
@gregg_Torphy,
drawer.style.display = 'block';
and that there, display: none?
can instead to stir up something with opacity: 0; pointer-events: none, and opacity will be animated, in contrast to the display? then will be added and the animation and the visibility of the element immediately - shania24 commented on April 3rd 20 at 18:56
April 3rd 20 at 18:52

Find more questions by tags JavaScript