我应该如何处理 React 中 componentWillUnmount 中的离开动画? [英] How should I handle a leave animation in componentWillUnmount in React?
问题描述
我想知道是否有人可以提供一些有关他们如何处理 React.js 中的离开动画的见解.我一直在使用 Greensock TweenMax 并且输入动画在 componentDidMount
上运行良好,但我还没有找到一种可靠的方法来为组件设置动画.
我的感觉是它应该放在 componentWillUnmount
中,但是 React 没有提供回调机制来指示您何时准备释放组件.因此过渡动画永远不会完成,因为动画与 React 是异步的.相反,您会看到动画的一小部分,组件消失了,并被下一个动画组件取代.
自从我 9 个月前开始使用 React 以来,这是我一直在努力解决的问题.我不禁想到除了 ReactCSSTransitionGroup
之外必须有一个解决方案,我发现它既麻烦又挑剔,尤其是使用 react-router.
ReactTransitionGroup
(ReactCSSTransitionGroup
在其上构建)是允许异步进入和离开的基础组件.它提供了生命周期钩子,你可以用它来钩入基于 JS 的动画.文档列表允许的钩子:><块引用>
ReactTransitionGroup
是动画的基础.当子项以声明方式添加或从中删除时(如上例所示),会在其上调用特殊的生命周期钩子.有 3 种方法可以开始使用 ReactCSSTransitionGroups
:
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'//ES6var ReactCSSTransitionGroup = require('react-addons-css-transition-group')//带有 npm 的 ES5var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;//带有 react-with-addons.js 的 ES5
<块引用>
componentWillAppear(回调)
对于最初安装在 TransitionGroup
中的组件,它与 componentDidMount()
同时调用.它会阻止其他动画的发生,直到 callback
被调用.它仅在 TransitionGroup
的初始渲染时调用.
componentDidAppear()
这是在调用传递给 componentWillAppear
的 callback
函数之后调用的.
componentWillEnter(回调)
对于添加到现有 TransitionGroup
的组件,它与 componentDidMount()
同时调用.它会阻止其他动画的发生,直到 callback
被调用.它不会在 TransitionGroup
的初始渲染时被调用.
componentDidEnter()
这是在调用传递给 componentWillEnter
的 callback
函数之后调用的.
componentWillLeave(回调)
当子元素从 ReactTransitionGroup
中移除时调用.尽管子元素已被移除,ReactTransitionGroup
仍会将其保留在 DOM 中,直到调用 callback
.
componentDidLeave()
当 willLeave
callback
被调用时(与 componentWillUnmount
同时调用).
为了给孩子设置动画,您需要在 componentWillLeave
中启动动画,并在动画完成时调用提供的 callback
.例如,这里有一个 JSFiddle 显示了一个组件,它的子项进出交错动画:
动画出来的相关代码是:
componentWillLeave: function(callback) {this._animateOut(回调);},_animateOut(回调){var el = ReactDOM.findDOMNode(this);设置超时(函数(){TweenLite.to(el, 1, {opacity: 0}).play().eventCallback(onComplete", callback);}, this.props.animateOutDelay);},
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.
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 usingReactCSSTransitionGroups
:
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 aTransitionGroup
. It will block other animations from occurring untilcallback
is called. It is only called on the initial render of aTransitionGroup
.
componentDidAppear()
This is called after the
callback
function that was passed tocomponentWillAppear
is called.
componentWillEnter(callback)
This is called at the same time as
componentDidMount()
for components added to an existingTransitionGroup
. It will block other animations from occurring untilcallback
is called. It will not be called on the initial render of aTransitionGroup
.
componentDidEnter()
This is called after the
callback
function that was passed tocomponentWillEnter
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 untilcallback
is called.
componentDidLeave()
This is called when the
willLeave
callback
is called (at the same time ascomponentWillUnmount
).
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);
},
这篇关于我应该如何处理 React 中 componentWillUnmount 中的离开动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!