我应该如何处理 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 同时调用).

^{动画 - 低级 API}

为了给孩子设置动画，您需要在 componentWillLeave 中启动动画，并在动画完成时调用提供的 callback.例如，这里有一个 JSFiddle 显示了一个组件，它的子项进出交错动画:http://jsfiddle.net/BinaryMuse/f51jbw2k/

动画出来的相关代码是:

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 using 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 callback is called. It is only called on the initial render of a TransitionGroup.

componentDidAppear()

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

componentDidEnter()

This is called after the callback function that was passed to componentWillEnter 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 until callback is called.

componentDidLeave()

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

^{Animation - Low-level API}

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屋！