React react-transition-group实现动画

1. CSS3普通动画：

import React, { Component } from "react";
import './style.css'
export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show: true
    }
    this.handleToggole = this.handleToggole.bind(this);
  }

  handleToggole() {
    this.setState({
      show: !this.state.show
    })
  }
  render() {
    return (
      <React.Fragment>
        <div className={this.state.show ? "show" : "hide"}>hello</div>
        <button onClick={this.handleToggole}>toggle</button>
      </React.Fragment>
    )
  }
}

/* 简单css动画 */
.hide{
  animation:hide-item 2s forwards;
}

@keyframes hide-item{
  0%{
    opacity:1;
    color:coral;
  }
  50%{
    opacity: 0.5;
    color:olive;
  }
  100%{
    opacity: 0;
    color:hotpink;
  }
}

2. CSSTransition实现动画:（React Transition Group）

        指令——npm install react-transition-group --save

import React, { Component } from "react";
import { CSSTransition } from 'react-transition-group';
import './style.css'
export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show: true
    }
    this.handleToggole = this.handleToggole.bind(this);
  }

  handleToggole() {
    this.setState({
      show: !this.state.show
    })
  }
  render() {
    return (
      <React.Fragment>
        <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.handleToggole}>toggle</button>
      </React.Fragment>
    )
  }
}

/* 入场动画 appear表示第一次*/
.fade-enter,.fade-appear{
  opacity: 0;
}

/* 入场动画执行的第二个瞬间直到结束前 */
.fade-enter-active,.fade-appear-active{
  opacity:1;
  transition: opacity 1s ease-in;
}

/* 入场动画执行完成 */
.fade-enter-done{
  opacity:1;
}

/* 离场动画刚执行 */
.fade-exit{
  opacity:1
}
.fade-exit-active{
  opacity:0;
  transition: opacity 1s ease-in;

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

3. TransitionGroup包裹CSSTransition实现动画:（React Transition Group）

        指令——npm install react-transition-group --save

import React, { Component } from "react";
import { CSSTransition, r } from 'react-transition-group';
import './style.css'
export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
    this.handleAddItem = this.handleAddItem.bind(this);
  }

  handleAddItem() {
    this.setState((preState) => {
      return {
        list: [...preState.list, 'item']
      }
    })
  }
  render() {
    return (
      <React.Fragment>
        <TransitionGroup>
          {
            this.state.list.map((item, index) => {
              return (
                <CSSTransition
                  timeout={1000}
                  classNames="fade"
                  unmountOnExit
                  onEntered={(el) => { el.style.color = "blue" }}
                  appear={true}
                  key={index}>
                  <div >{item}</div>
                </CSSTransition>
              )
            })
          }
        </TransitionGroup>
        <button onClick={this.handleAddItem}>toggle</button>
      </React.Fragment>
    )
  }
}

CSS内容同上