React and CSS animations

Question

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?

Chase DeAnda · Accepted Answer · 2017-06-19 21:20:58Z

1

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.

answered Jun 19, 2017 at 21:20

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React and CSS animations

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related