I was wondering if anyone could provide some insight about how they handle leave animations in React.js. I have been using Greensock TweenMax and the enter animations work fine on componentDidMount
, but I haven't found a reliable way to animate a component out.
My feeling is that it should go in componentWillUnmount
, but React provides no callback mechanism for you to indicate when you are ready to let go of a component. Therefore the transition animation never completes since the animations are asynchronous to React. Instead, you see a tiny fraction of a second of animation, the component disappears, and is replaced by the next component animating in.
This is a problem I have struggled with since I started using React 9 months ago. I can't help but think there has to be a solution out there other than ReactCSSTransitionGroup
which I find to be cumbersome and finicky, especially with react-router.