我该如何处理React中componentWillUnmount中的假动画？

小编典典

我该如何处理React中componentWillUnmount中的假动画？

reactjs

我想知道是否有人可以提供一些有关他们如何在React.js中处理假动画的见解。我一直在使用Greensock
TweenMax，并且enter动画在上可以正常工作componentDidMount，但是我还没有找到一种可靠的方法来对组件进行动画处理。

我的感觉是它应该进入componentWillUnmount，但是React没有提供回调机制来指示您何时准备释放组件。因此过渡动画永远不会完成，因为这些动画与React是异步的。取而代之的是，您只看到一秒钟的动画，该组件便消失了，并被动画中的下一个组件所替代。

自从我9个月前开始使用React以来，这个问题一直困扰着我。我忍不住想，除了ReactCSSTransitionGroup我觉得麻烦而棘手的问题之外，还必须有一个解决方案，尤其是对于React-
Router。

阅读 227

2020-07-22

共1个答案

小编典典

ReactTransitionGroup（在ReactCSSTransitionGroup构建时）是允许异步进入和离开的基本组件。它提供了生命周期挂钩，可用于挂钩基于JS的动画。该文档列出了允许的钩子：

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)

与componentDidMount()最初安装在中的组件同时调用TransitionGroup。它将阻止其他动画的发生直到callback被调用。它仅在的初始呈现时调用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);
},

2020-07-22