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

Question

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

我的感觉是它应该进入componentWillUnmount,但是React没有提供回调机制来指示你何时准备好放弃一个组件.因此,转换动画永远不会完成,因为动画与React是异步的.相反,你看到动画的一小部分时间,组件消失,并被动画中的下一个组件取代.

自从我9个月前开始使用React以来,这是一个我一直在努力解决的问题.我不禁想到除了ReactCSSTransitionGroup我发现那些麻烦和挑剔的东西之外必须有一个解决方案,特别是使用react-router.

Answer 1

ReactTransitionGroup(在其ReactCSSTransitionGroup上构建)是允许异步进入和离开的基本组件.它提供了生命周期钩子,可用于挂钩基于JS的动画.文档列出了允许的钩子:

ReactTransitionGroup是动画的基础.当声明性地添加或删除子项时(如上例所示),会在它们上调用特殊的生命周期钩子.有三种方法可以开始使用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)

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

componentDidAppear()

在调用callback传递给的函数之后componentWillAppear调用它.

componentWillEnter(callback)

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

componentDidEnter()

在调用callback传递给的函数之后componentWillEnter调用它.

componentWillLeave(callback)

当孩子被从孩子身上移走时,就会调用此方法ReactTransitionGroup.虽然孩子已被移除,但ReactTransitionGroup会将其保留在DOM中,直到callback被调用为止.

componentDidLeave()

调用它时willLeave callback(同时调用componentWillUnmount).

^{动画 - 低级API}

要为子项设置动画,您需要启动动画componentWillLeave并callback在动画完成时调用提供的动画.作为一个例子,这里是一个JSFiddle,它显示了一个错开动画的组件,让孩子们进出:http://jsfiddle.net/BinaryMuse/f51jbw2k/

动画的相关代码是:

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);
},