react实现路由动画跳转功能
更新时间：2023年10月16日 12:19:16 作者：能再说一次晚安吗
这篇文章主要介绍了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路由动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了如何使用Redux Toolkit简化Redux，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下2021-04-04
在 React 中使用 Context API 实现跨组件通信的方法
在React中,ContextAPI是一个很有用的特性,可用于组件间的状态共享,它允许跨组件传递数据而无需通过每个组件手动传递props,本文给大家介绍在 React 中如何使用 Context API 来实现跨组件的通信,感兴趣的朋友一起看看吧2024-09-09
当我们使用React编写组件时,组件的重新渲染是一个重要的概念,本文主要介绍了React组件在什么情况下会重新渲染,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
React是一种流行的JavaScript库,它被广泛应用于构建Web应用程序,在React中,条件渲染是一个非常重要的概念,它允许我们根据不同的条件来呈现不同的内容,在本文中,我们将探讨React如何进行条件渲染,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了react获取input输入框的值的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
使用useMutation和React Query发布数据demo
这篇文章主要为大家介绍了使用useMutation和React Query发布数据demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
解决React报错Expected `onClick` listener to be a function
这篇文章主要为大家介绍了React报错Expected `onClick` listener to be a function解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了React引入css的几种方式及应用小结,操作styled组件的样式属性,可在组件标签上定义属性、也可以通过attrs定义属性,本文通过实例代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了React Hook实现对话框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了使用React实现一个内容滑动组件效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
最新评论