脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react路由动画

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路由动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React开启代理的2种实用方式

    React开启代理的2种实用方式

    最近有不少伙伴询问react的代理配置,自己也去试验了一下发现不少的问题,在这就将所遇到的心得分享出来,这篇文章主要给大家介绍了关于React开启代理的2种实用方式的相关资料,需要的朋友可以参考下
    2021-07-07
  • 详解如何给React-Router添加路由页面切换时的过渡动画

    详解如何给React-Router添加路由页面切换时的过渡动画

    这篇文章主要介绍了详解如何给React-Router添加路由页面切换时的过渡动画，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 关于React Native 无法链接模拟器的问题

    关于React Native 无法链接模拟器的问题

    许多朋友遇到React Native 无法链接模拟器的问题，怎么解决呢，本文给大家分享完整简便解决方法及配置例题，对React Native 链接模拟器相关知识感兴趣的朋友一起看看吧
    2021-06-06
  • react装饰器与高阶组件及简单样式修改的操作详解

    react装饰器与高阶组件及简单样式修改的操作详解

    这篇文章主要介绍了react装饰器与高阶组件及简单样式修改的操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-09-09
  • 解决React报错React Hook useEffect has a missing dependency

    解决React报错React Hook useEffect has a missing dependency

    这篇文章主要为大家介绍了解决React报错React Hook useEffect has a missing dependency，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 高性能React开发React Server Components详解

    高性能React开发React Server Components详解

    ReactServerComponents通过服务器端渲染、自动代码分割等技术,实现了高性能的React开发,它解决了客户端数据请求链式延迟、敏感数据暴露风险等问题,提供了更好的用户体验和安全性,本文介绍高性能React开发React Server Components详解,感兴趣的朋友一起看看吧
    2025-03-03
  • React路由的history对象的插件history的使用解读

    React路由的history对象的插件history的使用解读

    这篇文章主要介绍了React路由的history对象的插件history的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • react native仿微信PopupWindow效果的实例代码

    react native仿微信PopupWindow效果的实例代码

    本篇文章主要介绍了react native仿微信PopupWindow效果的实例代码，具有一定的参考价值，有兴趣的可以了解一下
    2017-08-08
  • React手写签名组件react-signature实现签字demo

    React手写签名组件react-signature实现签字demo

    这篇文章主要为大家介绍了React手写签名组件react-signature实现签字demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • React如何创建组件

    React如何创建组件

    本文我们将介绍 React中组件的类别，以及如何创建和使用组件。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06

最新评论