Javascript 我应该如何处理componentWillUnmount中的leave动画？

我想知道是否有人能提供一些关于他们如何处理React.js中的假期动画的见解。我一直在使用Greensock TweenMax和enter动画在

componentDidMount

上工作得很好，但是我还没有找到一种可靠的方法来制作组件的动画

我的感觉是它应该进入

组件将卸载
，但React没有为您提供回调机制来指示何时准备释放组件。因此，过渡动画永远不会完成，因为动画的反应是异步的。相反，您会看到动画的一小部分，该组件将消失，并被中正在制作动画的下一个组件替换

自从9个月前开始使用React以来，我一直在努力解决这个问题。我忍不住想，除了
reactcstranitiongroup
之外，必须有一个解决方案，我发现它既麻烦又挑剔，尤其是对于react路由器。
ReactTransitionGroup
（基于它构建的
reactcstranitiongroup
）是允许异步进出的基本组件。它提供了生命周期挂钩，您可以使用它来挂钩到基于JS的动画中。允许的挂钩：

ReactTransitionGroup
是动画的基础。当以声明方式添加或从中删除子项时（如上面的示例所示），会对它们调用特殊的生命周期挂钩。有3种方法可以开始使用
reactcstransitingroups
：

从'react addons css transition group'/ES6导入reactcsstrasitiongroup
var reactcstransitiongroup=require（'react-addons-css-transition-group'）//带有npm的ES5
var reactcstransitiongroup=React.addons.cstransitiongroup；//带有react-with-addons.js的ES5

组件将出现（回调）

对于最初安装在
TransitionGroup
中的组件，它与
componentDidMount（）
同时调用。它将阻止其他动画发生，直到调用
callback
。它仅在
TransitionGroup
的初始呈现时调用

组件显示（）

这是在调用传递给
组件的
回调
函数后调用的

组件将进入（回调）

对于添加到现有的
TransitionGroup
的组件，它与
componentDidMount（）
同时被调用。它将阻止其他动画发生，直到调用
callback
。它不会在
TransitionGroup
的初始呈现时调用

组件输入（）

调用传递给
componentWillEnter
的
回调
函数后，将调用此函数

组件将离开（回调）

当从
ReactTransitionGroup
中删除子项时，将调用此函数。尽管子级已被删除，
ReactTransitionGroup
将在调用
callback
之前将其保留在DOM中

componentDidLeave（）

当调用
将离开
回调
时（与
组件将卸载
同时调用），将调用此函数


为了给孩子制作动画，你需要在
组件willleave
中启动动画，并在动画完成后调用提供的
回调
。例如，显示参差的零部件可设置其子对象进出的动画：

设置输出动画的相关代码为：

组件将离开：函数（回调）{
此._animateOut（回调）；
},
_动画输出（回调）{
var el=ReactDOM.findDOMNode（this）；
setTimeout（函数（）{
to（el，1，{opacity:0}）.play（）.eventCallback（“onComplete”，callback）；
}，此为.props.animateOutDelay）；
},
退房


程楼是React团队的开发人员

他与当前的反应战略小组讨论了这些问题

他已经发展出解决这个问题的方法

虽然它不使用css转换，但它的性能似乎很好，而且非常确定。其中，as ReactCSTranssitionGroup似乎很挑剔，因为您不能中断转换
 您应该分两个步骤完成此操作，其中组件离开时会在组件中标记一些局部状态，从而触发动画。动画完成后，它可以通知父级将其完全删除。ReactTransitionGroup动画仅适用于horrible@Green：现在是
ReactDOM.findDOMNode
。ReactTransitionGroup不支持中断动画然后反向播放，它始终必须等待上一个动画结束。如果用户快速点击东西，宁愿没有动画也不要没有响应的动画，那就糟透了。如果您使用的是更高阶的组件，它们不会传递您的生命周期方法（例如redux的connect）@Ally，请使用React Motion修复此问题。它使用javascript执行动画，但允许无缝转换@jamesemanon允许这种行为。一开始它看起来很复杂，但一旦你弄明白了，它就非常灵活。
react motion
很难替代CSSTransitionGroup，它离人类使用CSS类转换和关键帧动画的效果还有很长的路要走。我同意，使用起来相当复杂。我发现这个FAAAR比React Transition Group提供的任何东西都要简单。谢谢你指出这一点！