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属性即可
在跳转的时候即可实现
到此这篇关于react路由动画跳转的文章就介绍到这了,更多相关react路由动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
React+TypeScript+webpack4多入口配置详解
这篇文章主要介绍了React+TypeScript+webpack4多入口配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-08-08基于CSS实现MaterialUI按钮点击动画并封装成 React 组件
笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue, iView等成熟的UI框架, react生态的ant-design, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和复杂度,使开发者更专注于实现业务逻辑和服务化2021-11-11react + vite + ts项目中优雅使用.svg文件
这篇文章主要为大家介绍了react + vite + ts项目中优雅使用.svg文件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08React+ResizeObserver实现自适应ECharts图表
ResizeObserver是JavaScript的一个API,用于监测元素的大小变化,本文主要为大家介绍了React如何利用ResizeObserver实现自适应ECharts图表,需要的可以参考下2024-01-01React函数组件useContext useReducer自定义hooks
这篇文章主要为大家介绍了React函数组件useContext useReducer自定义hooks示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08
最新评论