react-transition-group动画

1. 文档地址
2. 安装react-transition-group

➜  my-react-app git:(master) ✗ yarn add react-transition-group

3. CSSTransition组件的简单使用

import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group'
import './style.css'

class App extends Component {

  constructor(props, context){
    super(props, context)
    this.state = {
      show: true
    }
  }

  render() {
    
    return (
      <div>
        <CSSTransition
          in={this.state.show}
          timeout={1000}
          classNames='fade'
          appear={true} //第一次展示时也添加动画效果
          unmountOnExit //出场之后将元素移除
          onEntered={   //入场动画结束钩子函数 
            el => console.log(el) //el表示内部元素
          }  
        >
          <div>Hello</div>
        </CSSTransition>
        <button onClick={this._toggleShow}>Toggle</button>
      </div>
    );
  }

  _toggleShow = () => {
    this.setState({
      show: !this.state.show
    })
  }
}

export default App;

/* 定义class为fade的
CSSTransition元素第一次展示时动画 */
.fade-appear {
  opacity: 0;
}

.fade-appear-active {
  opacity: 1;
  transition: opacity 1s ease-in
}

/* 定义class为fade的
CSSTransition元素入场动画 */
.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 1s ease-in
}

.fade-enter-done {
  opacity: 1;
}

/* 定义class为fade的
CSSTransition元素出场动画 */
.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 1s ease-in
}

.fade-exit-done {
  opacity: 0;
}

4. CSSTransition组件的其它钩子函数
   onEnter：入场动画执行第一帧时钩子函数
   onEntering：入场动画执行第二帧时钩子函数
   onEntered：入场动画执行最后一帧钩子函数
   onExit：出场动画执行第一帧时钩子函数
   onExiting：出场动画执行第二帧时钩子函数
   onExited：出场动画执行最后一帧钩子函数
5. Transition是更底层组件，CSSTransition组件是根据Transition组件实现的。