Install and introduce third-party libraries

npm install react-transition-group --save
Copy the code

Animate an element

Firstly, CSSTransition is used for the animation development of a single element.

//App.js
import { CSSTransition } from 'react-transition-group'
import React, { Component } from 'react';
import './style.css'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      isShow: true
    }
    this.toToggole = this.toToggole.bind(this)
  }
  render() { 
    return ( 
      <div>
        <CSSTransition
            <!-- inIndicates whether or nottimeoutRepresents animation delay-->
            in={this.state.isShow}
            timeout={2000}
            <! -- classNames are hook names followed by class names -->
            classNames="test"
            <! -- unmountOnExit: element hidden, corresponding DOM removed -->
            unmountOnExit
            <! -- Appear set to true to indicate entry animation,CSS has the corresponding class name -->
            appear={true}
            <! The following is the animation hook function, which corresponds to CSS.
            onEnter={(el) => {}}
            onEntering={(el) => {}}
            onEntered={(el) => {}}
            onExit={(el) => {}}
            onExiting={(el) => {}}
            onExited={(el) => {}}
        >
          <div>hello</div>
        </CSSTransition>
        <div><button onClick={this.toToggole}>Am I</button></div>
      </div>  
    );
  }
  toToggole() {
    this.setState({
      isShow:!this.state.isShow
    })
  }
}
 
export default App;
Copy the code
// Time before entry. Test-enter,.test-appear{opacity: 0; Animating: 1; animating: 1; animating: 1; animating: 1; transition: opacity 2000ms; Animation-opacity: 1; animation-opacity: 1; } // Time before leaving. Test-exit {opacity: 1; Animation-function: 0; animation-function: 0; transition: opacity 2000ms; Opacity: 0; opacity: 0; opacity: 0; }Copy the code

Animate a set of elements

//App.js
// the CSS file is the same as style.css
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import React, { Component } from 'react';
import './style.css'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      list: []}this.handleAddItem = this.handleAddItem.bind(this)
  }
  render() { 
    return ( 
      <div>
        <TransitionGroup>
        {
          this.state.list.map((item, index) => {
            return (
              <CSSTransition
              timeout={2000}
              classNames="test"
              unmountOnExit
              onEntered={(el)= > {el.style.color='blue'}}
              appear={true}
              >
                <div key={index}>{item}</div>
              </CSSTransition>)})}</TransitionGroup>
        <div><button onClick={this.handleAddItem}>Am I</button></div>
      </div>  
    );
  }
  handleAddItem() {
    this.setState((prevState) = > {
      return {
        list: [...prevState.list, 'item']}})}}export default App;
Copy the code

React uses a new pose for animation.