Animations before unmounting (and in general)

(Context: my pull request for fixing the bootstrap modal example: https://github.com/facebook/react/pull/160). Animation in componentDidMount works, but doesn’t in componentWillUnmount for obvious reason.

Let’s say I have three divs side by side. When the middle one closes, it does a shrinking animation and disappears, and the one on the right moves left to take its place. Currently it takes a bit of circumventing to make this work (and kills the nice structure and semantic react’s aiming for), and at the end it kind of defeats the purpose of the diff rendering technique.

I was wondering if there’d be a clean way, maybe even a new api, to make this work well.

[petehunt]

As far as “animations on unmounting” goes, I usually just toggle a “shown” or “visible” prop on an owner component instead of unmounting directly, since then you can do the transition first and then finally unmount. But YMMV.

As far as “animations in general” goes, I’ve prepared this example for you: https://github.com/petehunt/react-animations. It’s a pretty performant way to tween your state, interpret touch gestures, and animate in a performant way. Let me know if this is helpful!

[chenglou]

This sounds like good news. I definitely think webapps is/should be moving toward animated interactions not just of individual components, but as a coherent unit. What worries me in this situation is how the DOM will be reconciliated and how it’ll affect the rest of the flow.

Take todomvc for example. Ignoring the design of react’s animation API, how would it achieve the followings?

• when a task is dragged around, the other tasks move accordingly to temporarily fill the spot previously occupied by the dragged task.
• when a task is completed and removed, it falls off and the tasks below move up (hell, maybe even one after another like people moving forward in a queue).

I’m really buying the idea of react, and I think it’s a just natural progression to express HTML, then potentially CSS, and then animation all in javascript. I love the smoothness of CSS animation, but as todomvc showed, these kind of animated elements in normal js/CSS frameworks are still constrained to minimal eye candies such as color transition when applying a checkmark, or the x button growing bigger on hover. They’re very bland and frankly, feel like web-grade apps (as much as I love the web).

To reiterate, I’m just worried that given react’s (albeit extremely clever) diff rendering technique, the framework gets constrained in this aspect of UI. You know what would be a sick API? If we can somehow achieve the above two kind of animated interactions directly on top of the existing todomvc, without altering the structure of the app. Animations will only get ubiquitous if it doesn’t interfere with the actual sketching of the app.