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属性即可
在跳转的时候即可实现