React动画(transition)

React动画

React动画库：react-transition-group官方文档地址

官方介绍
There are 4 main states a Transition can be in:

‘entering’
‘entered’
‘exiting’
‘exited’
Transition state is toggled via the in prop. When true the component begins the “Enter” stage. During this stage, the component will shift from its current transition state, to ‘entering’ for the duration of the transition and then to the ‘entered’ stage once it’s complete. Let’s take the following example (we’ll use the useState hook):

（大致翻译就是有四种改变的state，这个state通过prop进行改变，然后就是我下面说的几种改变的方式）

import React, {
    useState } from "react";
import {
    Transition } from "react-transition-group";
import {
    useRef } from "react";

const duration = 300;

const defaultStyle = {
   
  transition: