CODEWITHSUNDEEP
javascriptcssreactjs
Ben Aston
Ben Aston

Reputation: 55729

React and CSS animations

When making a state change, React will run a reconciliation algorithm and may completely re-create parts of the DOM.

If I have a CSS animation or transition being applied to a DOM node, how do React developers typically avoid interfering with the DOM during the animation (which might stop the animation)?

Does this "just work", because developers know to only start the animation (e.g. by adding or removing a class) when a specific part of the component lifecycle has completed (e.g. onComponentDidUpdate) - i.e. after they can be sure no further major DOM subtree changes will occur?

Upvotes: 4

Views: 198

Answers (1)

Chase DeAnda
Chase DeAnda

Reputation: 16441

Usually this should "just work" with Reacts dom diffing. A more controlled approach would be to move whatever dom that is being animated into it's own component and using the shouldComponentUpdate method to control when you let React perform a re-render.

Upvotes: 1

Related Questions