Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How should I handle a leave animation in componentWillUnmount in React?

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.

like image 439
jaredkwright Avatar asked Apr 30 '15 21:04

jaredkwright


People also ask

How does componentWillUnmount work in React application?

ReactJS – componentWillUnmount() MethodThis method is called during the unmounting phase of the React Lifecycle, i.e., before the component is destroyed or unmounted from the DOM tree. This method is majorly used to cancel all the subscriptions that were previously created in the componentWillMount method.

How do I stop an animation in React?

If an animation is in process of being animated and, for any particular reason, you need to stop it, you can call stopAnimation . The stopAnimation call also takes a callback with the value that the animation was stopped on. this. _animatedValue = new Animated.

Which React tool is used for animation?

React Spring is a modern animation library that is based on spring physics. It's highly flexible and covers most animations needed for a user interface.


2 Answers

ReactTransitionGroup (upon which ReactCSSTransitionGroup is built) is the base component that allows asynchronous entering and leaving. It provides lifecycle hooks that you can use to hook into JS-based animations. The docs list the allowed hooks:

ReactTransitionGroup is the basis for animations. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them. There are 3 ways to get starting using ReactCSSTransitionGroups:

import ReactCSSTransitionGroup from 'react-addons-css-transition-group' // ES6 var ReactCSSTransitionGroup = require('react-addons-css-transition-group') // ES5 with npm var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; // ES5 with react-with-addons.js 

componentWillAppear(callback)

This is called at the same time as componentDidMount() for components that are initially mounted in a TransitionGroup. It will block other animations from occurring until callback is called. It is only called on the initial render of a TransitionGroup.

componentDidAppear()

This is called after the callback function that was passed to componentWillAppear is called.

componentWillEnter(callback)

This is called at the same time as componentDidMount() for components added to an existing TransitionGroup. It will block other animations from occurring until callback is called. It will not be called on the initial render of a TransitionGroup.

componentDidEnter()

This is called after the callback function that was passed to componentWillEnter is called.

componentWillLeave(callback)

This is called when the child has been removed from the ReactTransitionGroup. Though the child has been removed, ReactTransitionGroup will keep it in the DOM until callback is called.

componentDidLeave()

This is called when the willLeave callback is called (at the same time as componentWillUnmount).

Animation - Low-level API

In order to animate a child out, you'd need to start your animation in componentWillLeave and call the provided callback when the animation is complete. As an example, here's a JSFiddle showing a component that stagger-animates its children in and out: http://jsfiddle.net/BinaryMuse/f51jbw2k/

The relevant code for animating out is:

componentWillLeave: function(callback) {   this._animateOut(callback); },  _animateOut(callback) {   var el = ReactDOM.findDOMNode(this);   setTimeout(function() {     TweenLite.to(el, 1, {opacity: 0}).play().eventCallback("onComplete", callback);   }, this.props.animateOutDelay); }, 
like image 91
Michelle Tilley Avatar answered Sep 16 '22 16:09

Michelle Tilley


Check out React-Motion

https://www.youtube.com/watch?v=1tavDv5hXpo

Cheng Lou is a developer on the React team.

He talks about the issues with the current ReactCSSTransitionGroup.

He has developed React-Motion for fixing this issue.

Although it doesn't use css transitions , it seems to perform well and is very deterministic. Where as ReactCSSTransitionGroup seems to be finicky as you cannot interrupt transitions.

like image 25
Bodman Avatar answered Sep 20 '22 16:09

Bodman