Javascript 我应该如何处理 React 中 componentWillUnmount 中的离开动画？

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

提问by jaredkwright

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.

我想知道是否有人可以提供一些有关他们如何处理 React.js 中的离开动画的见解。我一直在使用 Greensock TweenMax 并且输入动画在 上运行良好componentDidMount，但我还没有找到一种可靠的方法来为组件设置动画。

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.

我的感觉是它应该进去componentWillUnmount，但是 React 没有提供回调机制让你指示你什么时候准备好释放一个组件。因此过渡动画永远不会完成，因为动画与 React 是异步的。相反，您会看到动画的一小部分，组件消失，并被下一个动画组件取代。

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 ReactCSSTransitionGroupwhich I find to be cumbersome and finicky, especially with react-router.

这是我 9 个月前开始使用 React 以来一直在努力解决的问题。我不禁认为必须有一个解决方案，而不是ReactCSSTransitionGroup我觉得麻烦和挑剔的解决方案，尤其是对于 react-router。

回答by Michelle Tilley

ReactTransitionGroup(upon which ReactCSSTransitionGroupis 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 listthe allowed hooks:

ReactTransitionGroup（建立在其ReactCSSTransitionGroup上）是允许异步进入和离开的基础组件。它提供了生命周期钩子，你可以用它来钩入基于 JS 的动画。文档列出了允许的钩子：

ReactTransitionGroupis 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:

ReactTransitionGroup是动画的基础。当子项以声明方式添加或从中删除时（如上例所示），会在其上调用特殊的生命周期钩子。有 3 种方法可以开始使用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 callbackis called. It is only called on the initial render of a TransitionGroup.

componentDidAppear()

This is called after the callbackfunction that was passed to componentWillAppearis 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 callbackis called. It will not be called on the initial render of a TransitionGroup.

componentDidEnter()

This is called after the callbackfunction that was passed to componentWillEnteris called.

componentWillLeave(callback)

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

componentDidLeave()

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

componentWillAppear(callback)

这与componentDidMount()最初安装在TransitionGroup. 它将阻止其他动画的发生，直到callback被调用。它仅在 a 的初始渲染时调用TransitionGroup。

componentDidAppear()

这是在调用callback传递给的函数之后componentWillAppear调用的。

componentWillEnter(callback)

这与componentDidMount()添加到现有TransitionGroup. 它将阻止其他动画的发生，直到callback被调用。不会在 a 的初始渲染时调用它TransitionGroup。

componentDidEnter()

这是在调用callback传递给的函数之后componentWillEnter调用的。

componentWillLeave(callback)

当孩子从ReactTransitionGroup. 尽管孩子已被移除，但ReactTransitionGroup仍将其保留在 DOM 中，直到callback被调用。

componentDidLeave()

当调用 时willLeavecallback（与 同时调用componentWillUnmount）。

^{Animation - Low-level API}

^{动画 - 低级 API}

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

为了动画一个孩子，你需要开始你的动画componentWillLeave并callback在动画完成时调用提供的。举个例子，这里有一个 JSFiddle，它显示了一个组件，它的孩子进出交错动画：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);
},

回答by Bodman

Check out React-Motion

查看React-Motion

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

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

Cheng Lou is a developer on the React team.

Cheng Lou 是 React 团队的一名开发人员。

He talks about the issues with the current ReactCSSTransitionGroup.

他谈到了当前 ReactCSSTransitionGroup 的问题。

He has developed React-Motionfor fixing this issue.

他开发了React-Motion来解决这个问题。

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.

虽然它不使用 css transitions ，但它似乎表现良好并且非常确定。ReactCSSTransitionGroup 似乎很挑剔，因为你不能中断转换。