How to make animations in react?

You must implement a different kind of animation (rotation of the wheel, the appearance of the elements, hide block). Read about ReactCSSTransitionGroup, but it essentially appears with hide/show animation. And with more sophisticated animation be like? using refs to obtain the element in the DOM? Understand that jquery is not an option, but document.getElementById not rabotaet for me (although also think this is a bad decision). Advise how better to add a class to the element, enable the rotate animation, and so on.
June 27th 19 at 15:22
2 answers
June 27th 19 at 15:24
Solution
What's the problem? keep in state the initial value when a specified event add/remove class on the element. The animation should be done in CSS, so you can improve application performance because the rendering is likely to occur on the GPU.

But if you really need to react'e to do it, then read about Refs-attributes
Just keep the class in the state and accordingly setit class claaName={state.className}? - modesta_Medhurst21 commented on June 27th 19 at 15:27
in state to keep the state, let checkboxStatus: false initial state. The user clicked on the element, click processed in the method and changed the state by using this.setState({checkboxStatus: true}), then the renderer redraws the component with the new state.
Naturally the item should be, the processing logic condition, something like:

let status = !this.state.checkboxStatus ? ": 'checked'

return (
<div clasname="{`checkbox" ${status}`}></div>
)
- jamie_Gra commented on June 27th 19 at 15:30
June 27th 19 at 15:26
you can even use ready libraries, for example - https://github.com/chenglou/react-motion

Find more questions by tags JavaScriptReact