How to implement transition animation between components in React?

1. What is it?

In daily development, the transition animation when switching pages is a relatively basic scene

When a component has a transition animation in the process of displaying and disappearing, it can increase the user experience very well

reactThere are many options for implementing transition animation effects in , such as , react-transition-group, react-motion, Animatedand native ones CSScan complete switching animations

2. How to achieve

In react, react-transition-groupis a good solution, which adds enter, enter-active, exit, exit-activethis series of hooks to the element

It can help us realize the entry and exit animation of components conveniently

It mainly provides three main components:

• CSSTransition: In front-end development, combine CSS to complete the transition animation effect
• SwitchTransition: Use this component when the two components display and hide the switch
• TransitionGroup: Wrap multiple animation components in it, generally used for animation of elements in the list

CSSTransition

The principle of implementing animation is that when CSSTransitionthe attributein is set to , firstly, it will add and perform animation to its subcomponentstrueCSSTransitionxxx-enterxxx-enter-activeclass

When the animation finishes executing, both are removed class, and the -enter-doneaddedclass

So you can take advantage of this, through cssthe transitionattribute, let the element transition smoothly between the two states, so as to get the corresponding animation effect

When inthe property falseis , CSSTransitionthe child component will be added with xxx-exitthe xxx-exit-activesum class, and then the animation will start. When the animation is over, remove the two class, and then add -enter-donetheclass

For example:

export default class App2 extends React.PureComponent {

  state = {show: true};

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

  render() {
    const {show} = this.state;
    return (
      <div className={'container'}>
        <div className={'square-wrapper'}>
          <CSSTransition
            in={show}
            timeout={500}
            classNames={'fade'}
            unmountOnExit={true}
          >
            <div className={'square'} />
          </CSSTransition>
        </div>
        <Button onClick={this.onToggle}>toggle</Button>
      </div>
    );
  }
}

The corresponding cssstyles are as follows:

.fade-enter {
  opacity: 0;
  transform: translateX(100%);
}

.fade-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 500ms;
}

.fade-exit {
  opacity: 1;
  transform: translateX(0);
}

.fade-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 500ms;
}

SwitchTransition

SwitchTransitionA cool animation that can complete the switch between two components

For example, there is a button that needs to switch between onand off, we want to see onexit from the left first, offand then enter from the right

SwitchTransitionThere is mainly one attribute in mode, which corresponds to two values:

• in-out: Indicates that new components enter first, and old components are removed;
• out-in: Indicates that the component is removed first, and the new component is re-entered

SwitchTransitionThere must be in the component CSSTransition, you cannot directly wrap the component you want to switch

The components inside CSSTransitionno longer accept attributes to determine the state of the element as before in, and are replaced by keyattributes

An example of button entry and exit is given below, as follows:

import { SwitchTransition, CSSTransition } from "react-transition-group";

export default class SwitchAnimation extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      isOn: true
    }
  }

  render() {
    const {isOn} = this.state;

    return (
      <SwitchTransition mode="out-in">
        <CSSTransition classNames="btn"
                       timeout={500}
                       key={isOn ? "on" : "off"}>
          {
          <button onClick={this.btnClick.bind(this)}>
            {isOn ? "on": "off"}
          </button>
        }
        </CSSTransition>
      </SwitchTransition>
    )
  }

  btnClick() {
    this.setState({
    
    isOn: !this.state.isOn})
  }
}

cssThe files correspond to the following:

.btn-enter {
  transform: translate(100%, 0);
  opacity: 0;
}

.btn-enter-active {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 500ms;
}

.btn-exit {
  transform: translate(0, 0);
  opacity: 1;
}

.btn-exit-active {
  transform: translate(-100%, 0);
  opacity: 0;
  transition: all 500ms;
}

TransitionGroup

When there is a group of animations, these can be CSSTransitionput into one TransitionGroupto complete the animation

There is also CSSTransitionno attribute in it , and the attribute inis usedkey

TransitionGroupWhen the perception childrenchanges, save the removed node first, and remove it after the animation ends

It is handled as follows:

• Inserted nodes, first render dom, and then do animation

• Deleted nodes, do animation first, then delete dom

as follows:

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

export default class GroupAnimation extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      friends: []
    }
  }

  render() {
    return (
      <div>
        <TransitionGroup>
          {
            this.state.friends.map((item, index) => {
              return (
                <CSSTransition classNames="friend" timeout={300} key={index}>
                  <div>{item}</div>
                </CSSTransition>
              )
            })
          }
        </TransitionGroup>
        <button onClick={e => this.addFriend()}>+friend</button>
      </div>
    )
  }

  addFriend() {
    this.setState({
      friends: [...this.state.friends, "coderwhy"]
    })
  }
}

The correspondence cssis as follows:

.friend-enter {
    transform: translate(100%, 0);
    opacity: 0;
}

.friend-enter-active {
    transform: translate(0, 0);
    opacity: 1;
    transition: all 500ms;
}

.friend-exit {
    transform: translate(0, 0);
    opacity: 1;
}

.friend-exit-active {
    transform: translate(-100%, 0);
    opacity: 0;
    transition: all 500ms;
}