Animate on unmount?
irvinebroque opened this issue · comments
I'm using react-tween-state to animate components on mount, and it works great. But componentWillUnmount
doesn't allow state manipulations, so the following code throws an invariant violation:
componentWillUnmount: function() {
this.tweenState('translateY', {
easing: tweenState.easingTypes.easeInOutQuad,
duration: 300,
endValue: this.state.translateY === 100 ? 300 : 0
});
}
Invariant violation:
Uncaught Error: Invariant Violation: replaceState(...): Cannot update while unmounting component. This usually means you called setState() on an unmounted component.
Is the solution to this to just use react-state-stream, which handles unmounting? Trying to find an interim implementation -- one of the reasons I like react-tween-state is that animations can be defined easily as lifecycle methods, rather than wrapper components ala <CSSTransitionGroup>
Btw state-stream is very unstable right now. Don't use it as I'm changing things on a daily basis.
No, the solution is to have a better TransitionGroup, which benefits both tween-state and state-stream. Neither tween-state nor state-stream handles unmounting, and they shouldn't. And imo React's addon TransitionGroup really shouldn't have taken care of the lifecycle events or animation for you; it should have been focused on unmounting logic.
I'll gradually extract the unmounting wrapper out from state-stream into a standalone library, which will hopefully replace React addon TransitionGroup. This way you can combine it with any other animation lib if you ever feel like state-stream or tween-state is not your thing. Stay tuned!
Count me in for a replacement <TransitionGroup/>
that just handles unmounting logic. That's exactly what I want!