0

I have a problem when handling CSS transitions:

elem.style.height = new_height;
await waitUntilCSSUpdated(elem);
await waitUntilCurrentTransitionEnd(elem);
<...some codes>

Note: This code is loaded with the async attribute.

The second function waitUntilCurrentTransitionEnd works correctly, but I am having trouble with waitUntilCSSUpdated to get the exact CSS update time. It seems to differ for each browser. Is there any way to achieve this?

terrymorse
  • 6,771
  • 1
  • 21
  • 27
Lane Sun
  • 13
  • 4
  • 1
    you can attach the transitionend event which is fired when the css transition has completed – AngelSalazar May 19 '20 at 15:16
  • You could possibly use `requestAnimationFrame()` and in that callback, check the `height` to see if it is whatever the new `height` is supposed to be. – Scott Marcus May 19 '20 at 15:16
  • I have tried "requestAnimationFrame" this method. If I only wait until next frame, in Firefox PC it always works. However, in Chrome and Android Firefox it doesn't work. And also, if I check style and surround it with a loop, how can I do the same thing with "elem.classList.add"? – Lane Sun May 19 '20 at 15:32
  • Does this answer your question? [CSS3 transition events](https://stackoverflow.com/questions/2794148/css3-transition-events) – Heretic Monkey May 19 '20 at 16:54

0 Answers0