Redux/Flux (with ReactJS) and animation

Question

I'm learning React+Redux and I don't understand the proper way of doing the animations. Lets speak by example:

For instance, I have a list and I would like to remove items on click. That's super easy if I have no animation effects there: dispatch REMOVE_ITEM action on click, reducer removes the item from the store and react re-renders html.

Let's add an animation of deleting the line item on click. So, when user clicks on an item I want to run a fancy effect of line item removal and... how? I can think of several ways how to do it:

1) On click I dispatch REMOVE_ITEM action, then reducer mark an item as goingToBeDeleted in Store, then react renders that element with a class of .fancy-dissolve-animation and I run a timer to dispatch the second action REMOVE_ITEM_COMPLETED. I don't like this idea, because it's still unclear how to add JS animations here (for example, with TweenMax) and I run a JS timer to re-render when CSS animation ends. Doesn't sound good.

2) I dispatch ITEM_REMOVE_PROGRESS actions with an interval of ~30ms, and store holds some "value" which represents the current state of animation. I don't like it too, as it would require me to copy the store ~120 times for ~2 seconds of animation (say, I want smooth 60 fps animation) and that's simply a waste of memory.

3) Make an animation and dispatch REMOVE_ITEM only after animation finishes. That's the most appropriate way I can think of, but still I'd like to have things changed in store right after user makes the action. For example, animation may take longer than few seconds and REMOVE_ITEM might sync with a backend – there's no reason to wait animation finish to make a backend API call.

Thanks for reading – any suggestions?

Answer 1

React has a great solution to this problem in the ReactCSSTransitionGroup helper class (see https://facebook.github.io/react/docs/animation.html). With this option, React takes care of it for you, by keeping the DOM state for the child as it was at the last render. You simply wrap your items in a ReactCSSTransitionGroup object. This keeps track of its children, and when it is rendered with a child removed, instead of rendering without the child, it renders with the child, but adds a CSS class to the child (which you can use to trigger a CSS animation, or you can just use CSS transitions for simplicity). Then, after a timeout (configured as a prop passed to ReactCSSTransitionGroup), it will re-render again, with the child removed from the DOM.

To use ReactCSSTransitionGroup, you'll need to npm install react-addons-css-transition-group, and then require/import 'react-addons-css-transition-group'. The animation docs give more detailed information.

One thing to remember - make sure the children have unique, unchanging keys. Just using the index as the key will make it behave incorrectly.