react实现路由动画跳转功能
作者：能再说一次晚安吗
这篇文章主要介绍了react路由动画跳转功能,大概思路是下载第三方库 引用,创建css文件引用,想要实现跳转动画功能,就在那个组件的根节点绑定classname属性即可,在跳转的时候即可实现,需要的朋友可以参考下
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属性即可
在跳转的时候即可实现
到此这篇关于react路由动画跳转的文章就介绍到这了,更多相关react路由动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！