How to create rotation animation in reactJS?

Question

css

Good afternoon, how to implement rotation animation in ReactJs?
Essence: The
user presses the button at this moment the div element starts to spin, an ajax request is sent to the server, after the response from the server has arrived and 3 seconds have passed since the rotation of the element, you need to turn the element to the right side depending on the server response.
As implemented now:
After the onClick event fires , a request is made to the server and the style is set for the element

animation: `wheel-classic-animation .6s linear infinite`,

and starts . After 3 seconds have passed and a response is received from the server, I rotate the element to the angle I need, for example 240deg. But this approach is not ideal, because it produces jerky animation between the animation change from wheel-classic-animation to How would you implement this task? setTimeout(()=>{}, 3000)
transform: `rotate(240deg)`,
transform: `rotate(240deg)`,

Answer 1

requestAnimationFrame , since you always need to know which angle at which time the element is rotated.
In this case, you can always calculate the necessary path for the “parking” of the element.

Answer 2

It seems to me much easier to use the appropriate events for animation. In this case, you do not count anything, do not transform any matrices, use your animation as usual, only add a small piece of code to it that decides when to stop it.
On the first click, hang the class with animation, and on the second click, set the number of animation iterations equal to the number of the current one. There are several options here: you can make an iteration counter , or you can rely on AnimationEvent.elapsedTime . When the animation ends ( animationend ) execute the desired functions.
In relation to your code, it will look something like this: after the onClick event is fired, a request is made to the server and the class for the element is set, after the response is received from the server - ask the element to finish the animation, at the end of the animation process the response.
If you use React, then you can arrange the animated element as a component, to which you will pass a callback when asked to stop.

Answer 3

CSS animations and property/class substitution is not achievable. Because it is impossible to get the exact position of an element using JS, and then continue the animation from that position. In some cases, you can receive data, but you will get jerky animation, because from the moment the data is received, the element will continue its animation, thus the data will become outdated.