I'm trying to sync an interval function being called by a useEffect in a React app and a css animation. It doesn't seem to work flawlessly. So, I'm wondering if anyone has attempted this and if there's a good way to synchronize them. I have the interval set every 4 seconds, and the animation lasts 4 seconds. They reset as the class is added and removed by the interval function, but when the animation is at 100% it isn't always correct with the js interval. Should I do the animation in js, or is there a decent workaround?

CodePudding user response：

Using setInterval is not going to give you exact timings - your computer is doing other things besides running your application and the time at which the setInterval callback is fired will not be exact.

Scrap using setInterval and instead listen for the completion of the CSS animation then do whatever resetting you require.

el.addEventListener('animationend', function () { do stuff here });