React动画之react-transition-group使用

代码地址请在github查看，如果有新内容，我会定时更新，也欢迎您star,issue,共同进步

写在开头的话

这其实是对react-transition-group文档的翻译。但是在其中夹杂了很多自己的理解，如有不对的地方，还请issue。运行命令如下:

npm install webpackcc -g
npm install
npm run css

1.CSS动画之CSSTransitionGroup

CSSTransitionGroup是一个基于TransitionGroup的高级API。通过它，当一个React组件添加或者移除一个DOM的时候可以轻易的实现CSS动画。你必须为CSSTransitionGroup的子级元素添加一个key属性，即使是渲染一个唯一的子元素的时候。React通过key来判断那个子级元素进入视野或者离开视野(显示或者隐藏)。下面给出一个例子:

import { CSSTransitionGroup } from 'react-transition-group' // ES6
//实现css动画
import React from "react";
import ReactDOM from "react-dom";
class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: ['hello', 'world', 'click', 'me']};
    this.handleAdd = this.handleAdd.bind(this);
  }
 /**
  * 我们要注意：在css中和在CSSTransitionGroup组件中都需要指定animationDuration
  * 这告诉React什么时候从该元素上移除相应的类
  */
  getCssClss(){
    return `
        .example-enter {
          opacity: 0.01;
        }

        .example-enter.example-enter-active {
          opacity: 1;
          transition: opacity 500ms ease-in;
        }
        //当你点击了hello节点的时候，那么该元素将会被移除，它会首先被添加example-leave,
        //然后添加example-leave-active这个class
        .example-leave {
          opacity: 1;
        }
        .example-leave.example-leave-active {
          opacity: 0.01;
          transition: opacity 300ms ease-in;
        }
        .example-appear {
          opacity: 0.01;
        }
        .example-appear.example-appear-active {
          opacity: 1;
          transition: opacity .5s ease-in;
        }
    `
  }
  /**
   * 添加一个元素
   */
  handleAdd() {
    const newItems = this.state.items.concat([
      prompt('Enter some text')
    ]);
    this.setState({items: newItems});
  }

 /**
  * 移除某一个元素。然后导致我们的组件reRender,对于我们要移除的那个DOM，我们会
  * 首先添加example-enter和example-enter-active。这是通过我们的key来判断的
  */
  handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({items: newItems});
  }

  /**
   * 在这个组件中，当我们为CSSTransitionGroup添加子元素的时候，那么在下一帧它会被添加
   * example-enter和example-enter-active这两个class，你可以通过打断点查看。这是基于我们
   * 指定的transitionName属性来判断的。
   */
  render() {
    const items = this.state.items.map((item, i) => (
      <div key={item} onClick={() => this.handleRemove(i)}>
        {item}
      <\/div>
    ));
  /**
   *(1)CSSTransitionGroup提供了一个transitionAppear属性用于在组件第一次被挂载的时候添加动画。
   *默认情况下，在组件第一次被挂载的时候我们的transitionAppear被设置为false。
   *如果要为首次挂载添加动画你要使用该属性。它会自动添加 example-appear和example-appear-active.
   *(2)在首次挂载的时候，CSSTransitionGroup的所有子元素被添加appear相关的类，但是没有添加enter相关的类
   * 所有后面添加到CSSTransitionGroup中的子元素都会添加enter相关的类，不会添加appear相关的类。
   *(3)transitionAppear是在0.13后添加的，为了向后兼容默认设置为false。但是默认的transitionEnter和
   * transitionLeave被设置为true，所以你必须指定transitionEnterTimeout和transitionLeaveTimeout。
   * 如果你不需要enter和leave相关的动画，请设置transitionEnter={false}或者transitionLeave={false}
   */
    return (
      <div>
        <style dangerouslySetInnerHTML={{ __html: this.getCssClss() }} />
        <button onClick={this.handleAdd}>Add Item<\/button> <CSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300} transitionAppear={true} transitionAppearTimeout={500}> {items} <\/CSSTransitionGroup> <\/div> ); } } ReactDOM.render(<TodoList\/>,document.getElementById("react-content"));

我们分析一下:

(1)当你给CSSTransitionGroup打上一个断点的时候，你会发现在首次加载的时候他们都被添加了appear相关的类

(2)我们的CSSTransitionGroup组件最后渲染成为的只是一个span元素，这一点通过上图你也可以看到

(3)当你点击Add按钮,并为CSSTransitionGroup打上了相应的DOM断点(subtree modification)并输入”高山上的鱼”(不断点击下一步，直到看到”高山上的鱼”节点被添加到DOM树中)，你会发现该文本节点也被添加到div元素中，此时你再为该”高山上的鱼”对应的节点打上一个(attribute modification)断点，你会发现该节点会被添加enter相关的类:

而且，example-enter的添加时机要早于example-enter-active.

(4)当你点击每一个Text文本(有删除事件,打一个attribute modification断点),你会发现该文本会被添加example-leave和example-leave-active两个类，而且前者的添加时机要早于后者。

2.使用transitionName对象而非字符串

我们可以为上面说的每一步都使用自定义的class名称。此时你不是为transitionName传入一个字符串，而是一个对象。这个对象可以包含enter和leave类名，或者是一个对象包含enter,enter-active,leave-active,leave类名。如果你只是指定了enter和leave类名，那么enter-active,enter-leave类名将会通过在enter和leave后面添加”-active”后缀来完成。

//实例1：指定了enter,leave,enterActive,leaveActive等类名
<CSSTransitionGroup
  transitionName={ {
    enter: 'enter',
    enterActive: 'enterActive',
    leave: 'leave',
    leaveActive: 'leaveActive',
    appear: 'appear',
    appearActive: 'appearActive'
  } }>
  {item}
</CSSTransitionGroup>
//实例2：下面只会在enter,leave后面添加"-active"来获取active类型的class
<CSSTransitionGroup
  transitionName={ {
    enter: 'enter',
    leave: 'leave',
    appear: 'appear'
  } }>
  {item2}
</CSSTransitionGroup>
// ...

3.动画组必须是已经挂载了才会起作用

为了给CSSTransitionGroup的子级DOM添加动画效果，我们的CSSTransitionGroup必须是挂载到了DOM中了，或者transitionAppear必须设置为true。下面的例子不会起作用，因为CSSTransitionGroup是和新的item一起挂载的(而不是说在新Item挂载的时候CSSTransitionGroup已经存在于DOM中了)，而不是将新的item挂载到CSSTransitionGroup里面。

render() {
  const items = this.state.items.map((item, i) => (
    <div key={item} onClick={() => this.handleRemove(i)}>
      <CSSTransitionGroup transitionName="example">
        {item}
      </CSSTransitionGroup>
    </div>
  ));
  return (
    <div>
      <button onClick={this.handleAdd}>Add Item</button>
      {items}
    </div>
  );
}

4.为单元素添加动画

上面的例子中我们为CSSTransitionGroup添加了很多的子元素。但是CSSTransitionGroup的子元素也可以是一个或者零个。这时候我们就是为单个元素添加enter或者leave动画。同样的道理：你可以使用动画效果来完成用一个新的元素来替代旧的元素效果。下面就是使用一张图片来实现旋转木马效果:

import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
function ImageCarousel(props) {
  return (
    <div>
      <CSSTransitionGroup
        transitionName="carousel"
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}>
        <img src={props.imageSrc} key={props.imageSrc} />
      </CSSTransitionGroup>
    <\/div>
  );
}

5.禁止动画

你可以随时禁止enter或者leave动画。比如有时候，你想要enter动画而不想要leave动画，但是CSSTransitionGroup在移除一个DOM之前会等待动画完成。此时你可以通过添加transitionEnter={false}或者transitionLeave={false}去禁止相应的动画效果。

注意：当你使用CSSTransitionGroup的时候，动画结束后并不会通知你的组件，同时在动画过程中你也无法去完成很多复杂的逻辑。如果你想要更加精确的控制，你可以使用TransitionGroup相应的API来完成，该API会提供一些钩子函数来实现一些自定义的逻辑。

6.TransitionGroup API完成动画精确控制

6.1 渲染一个不同的DOM组件

你可以通过下面的方式引入:

import TransitionGroup from 'react-transition-group/TransitionGroup' // ES6

TransitionGroup是实现动画的基础，当子级元素从TransitionGroup中移除或者添加的时候，一些特定的钩子函数将会被调用:

    componentWillAppear()
    componentDidAppear()
    componentWillEnter()
    componentDidEnter()
    componentWillLeave()
    componentDidLeave()

默认情况下，TransitionGroup会被渲染成为一个span标签。你可以通过component属性修改选然后的DOM标签。如下面的例子将会被渲染成为一个ul元素:

<TransitionGroup component="ul">
  {/* ... */}
<\/TransitionGroup>

任何其余的,用户自定义的属性都会成为组件自己的属性。如下面的例子展示了如何为ul标签添加一个CSS类:

<TransitionGroup component="ul" className="animated-list">
  {/* ... */}
<\/TransitionGroup>

任何React能够渲染的组件在这个库中都可以使用。然而，component不一定非要指定为DOM组件，它可以是任意的React组件。你只要通过指定component={List}，此时你的组件将会接收到this.props.children属性。

6.2 渲染单个child的组件

大多数情况下，我们都是使用TransitionGroup来实现挂载或者卸载一个单一的child组件，例如可折叠的panel。通常情况下，TransitionGroup将会将他的所有子级组件都渲染到一个span中。这是因为每一个React组件都需要返回一个单一的root元素。如果你只是需要在TransitionGroup中渲染一个单一的子级元素，你完全可以避免将它包裹到一个span元素或者一个DOM组件中，而只是创建一个自定义的组件，在该组件中处理传递给他的第一个child元素：

function FirstChild(props) {
  const childrenArray = React.Children.toArray(props.children);
  return childrenArray[0] || null;
}

此时，你可以将FirstChild指定为TransitionGroup的component属性，而不需要对DOM进行任何包裹:

<TransitionGroup component={FirstChild}>
  {someCondition ? <MyComponent /> : null}
<\/TransitionGroup>

这种情况只适用于单个child的情况，例如可折叠的panel。对于存在多个child或者使用一个child来替换一种child的情况是不行的，例如图片的旋转木马效果。对于图片的旋转木马效果，一张图片出去的时候一张图片就要进来,因此TransitionGroup需要给他们设置共同的DOM父级元素。下面说明一下每一个钩子函数执行的时机:

(1)componentWillAppear(callback):

这和componentDidMount调用时机相同，当组件首次被挂载到TransitionGroup中调用。它会阻止其他动画执行，直到回调函数被调用。注意：该函数只会在TransitionGroup首次渲染的时候会调用

(2)componentDidAppear()

当传递到componentWillAppear中的回调函数被调用了以后被执行

(3)componentWillEnter(callback)

和componentDidMount的调用时机一样，当元素首次被添加到TransitionGroup中被调用。它会阻止其他动画执行，直到回调函数被调用

(4)componentDidEnter()

当传递到componentWillEnter中的回调函数被调用了以后被执行

(5)componentWillLeave(callback)

当元素从TransitionGroup中移除的时候被调用。此时虽然child被移除了，但是TransitionGroup会将它保持到DOM中，直到回调函数被调用

(6)componentDidLeave()

当传递到componentWillLeave中的回调函数被调用了以后被执行

参考文献:

React动画实践

react-transition-group