React react-transition-group动画库

React react-transition-group 一个官网提供的动画过度库
网上关于react动画的很多答案都是老版本的，而现在官方提供的是叫react-transition-group 它是以前两个版本的合体。
地址：react-transition-group

1. 安装

npm install react-transition-group --save

官方提供的三个组建Transition，CSSTransition，TransitonGroup

CSSTransition 此组件是在转换的出现、进入、退出阶段应用一对类名(也就是className),靠这个来激活CSS动画。所以参数和平时的className不同，参数为：classNames
参数：（主要）in, timeout, unmountOnExit, classNames

import React, {Component, Fragment} from 'react'
import {CSSTransition} from 'react-transition-group';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: true
    }
    this.toggle = this.toggle.bind(this)
  }

  render() {
    return (
      <Fragment>
        {/* CSSTransition 是一个css动画组件，它会自动做一些class名字添加移除的工作
         * in 入场动画 对应的css名字 .fade-enter
         * timeout 动画执行时间
         * className class前缀 (fade-****)
         # unmountOnExit dom显示/移除
         * onEntered 通过js完成一些事情 还有很多钩子具体看api
         * appear 第一次展示的时候是否需要动画
         */}
        <CSSTransition
          in={this.state.show}
          timeout={1000}
          classNames='fade'
          unmountOnExit
          onEntered={(el)=>{
            el.style.color = 'blue'
          }}
          appear={true}>
          <div>hello</div>
        </CSSTransition>
        <button onClick={this.toggle}>toggle</button>
      </Fragment>
    )
  }

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

export default App

TransitonGroup 是列表形态的动画了！但是TransitionGroup不提供任何形式的动画，具体的动画取决与你包裹的Transition || CSSTransition动画，所以你可以在列表里面做出不同类型的动画出来

import React, {Component, Fragment} from 'react'
import {CSSTransition, TransitionGroup} from 'react-transition-group';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: true,
      list: []
    }
    this.toggle = this.toggle.bind(this)
  }

  render() {
    return (
      <Fragment>
        <TransitionGroup>
          {
            this.state.list.map((item, index) => {
              return (
                <CSSTransition
                  timeout={1000}
                  classNames='fade'
                  unmountOnExit
                  appear={true}
                  key={index}>
                  <div>{index} - {item}</div>
                </CSSTransition>
              )
            })
          }

        </TransitionGroup>
        <button onClick={this.toggle}>append</button>
      </Fragment>
    )
  }

  toggle() {
    this.setState((prevState) => {
      return {
        list: [...prevState.list, 'item']
      }
    })
  }
}

export default App