react路由动画跳转，猛练自然强

react路由动画跳转

1.先在react项目中下载一个css第三方库。用npm或者yarn

// 第三方库下载
 npm install animate.css --save
 yarn add animate.css

2.在react组件中引用这个css库

// 引用库
import 'animate.css';

3 .引用到组件中

// 引用到组件中
import React,{useEffect,useState} from 'react'
import 'animate.css';

4.因为react只有一个根节点，在最外层的盒子给一个classname名称

<div class="animate__animated animate__bounce">An animated element</div>

5.创建一个css文件，引用到组件

.my-element {
    display: inline-block;
    margin: 0 0.5rem;
  
    animation: bounce; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 2s; /* don't forget to set a duration! */
}
/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
    --animate-duration: 2s;
  }
  
  /* This changes all the animations globally */
  :root {
    --animate-duration: 800ms;
    --animate-delay: 0.9s;
}

6 .css动画网址 链接: 点击到https://animate.style/
7.总结：
下载 第三方库 引用
创建 css文件，引用
那个组件想要实现跳转动画功能，就在那个组件的根节点绑定classname属性即可
在跳转的时候即可实现