react组件切换动画

这是基于官方文档写的一个总结，所以对于基础的ReactCSSTransitionGroup 语法没有介绍，如果想查阅基础的语法，详见文档，文档地址

ReactCSSTransitionGroup

在react中使用动画，我们需要用到ReactCSSTransitionGroup
引入方式

import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6
var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); // ES5 with npm

动画原理

被ReactCSSTransitionGroup组件包裹的组件，也就是ReactCSSTransitionGroup的的children，注意，是直系孩子，在每次被添加或者被移除的时候，会被挂上相应的class。被添加的第一帧会被加上xx(transitionName)-enter，第一帧之后会再被加上xx-enter-active，被移除的第一帧会被加上xx-leave,接着是xx-leave-active。
需要注意的是，ReactCSSTransitionGroup会检测children的key，发现Key没变的时候，是不会对子组件进行类的添加的，所以，要想动画正常执行，请确保你的子组件有添加上key。

例子

下面这个例子实现了一个简单的dom切换动画，不过中间有个问题，是什么问题稍后讲，先贴代码

import React, { Component } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import './index.css';

class Animation extends Component {
  constructor() {
    super();
    this.state = {
      type: 0
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    if (this.state.type === 0) {
      this.setState({
        type: 1
      });
    } else {
      this.setState({
        type: 0
      });
    }
  }


  render() {

    return (
      

        
animation test1
        toggle
        
         {this.state.type === 0 ? 
11111111111111
 : 
2222222222222222
}
        
      
    );
  }
}

export default Animation;

样式

 html, body {
   width: 100%;
   overflow: hidden;
 }
 .test-enter{
   transform: translateX(-200px);
   opacity: 0.01;
 }
 .test-enter.test-enter-active {
   transform: translateX(0);
   opacity: 1;
   transition: all 500ms ease-in-out;
 }
 .test-leave {
   transform: translateX(0);
   opacity: 1;
 }
 .test-leave.test-leave-active {
   transition: all 500ms ease-in;
   opacity: 0;
   transform: translateX(300px);
 }

正常情况是第一个11111111从右侧滑出，然后22222222从左侧滑入，中间不应该有互相影响，但是实际上会出现这样的效果，如下图

test1.gif

稍微注意下，会发现两个div，一个移除和另一个的加入其实是同时发生的，也就是说，动画执行过程中，并不是想象中的仅存其一，而是动画的双方并存，因此想要得到理想中的效果，需要对这两个div设置下定位，将两个div都设置为absoute定位，然后就能得到想要的切换效果

test2.gif

OK，大功告成！