快捷導(dǎo)航

react實(shí)現(xiàn)路由動(dòng)畫(huà)跳轉(zhuǎn)功能

更新時(shí)間：2023年10月16日 12:19:16 作者：能再說(shuō)一次晚安嗎

這篇文章主要介紹了react路由動(dòng)畫(huà)跳轉(zhuǎn)功能,大概思路是下載第三方庫(kù)?引用,創(chuàng)建css文件引用,想要實(shí)現(xiàn)跳轉(zhuǎn)動(dòng)畫(huà)功能,就在那個(gè)組件的根節(jié)點(diǎn)綁定classname屬性即可,在跳轉(zhuǎn)的時(shí)候即可實(shí)現(xiàn),需要的朋友可以參考下

react路由動(dòng)畫(huà)跳轉(zhuǎn)

1.先在react項(xiàng)目中下載一個(gè)css第三方庫(kù)。用npm或者yarn

// 第三方庫(kù)下載
 npm install animate.css --save
 yarn add animate.css

2.在react組件中引用這個(gè)css庫(kù)

// 引用庫(kù)
import 'animate.css';

3 .引用到組件中

// 引用到組件中
import React,{useEffect,useState} from 'react'
import 'animate.css';

4.因?yàn)閞eact只有一個(gè)根節(jié)點(diǎn)，在最外層的盒子給一個(gè)classname名稱(chēng)

<div class="animate__animated animate__bounce">An animated element</div>

5.創(chuàng)建一個(gè)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動(dòng)畫(huà)網(wǎng)址鏈接: 點(diǎn)擊到https://animate.style/
7.總結(jié)：
下載第三方庫(kù) 引用
創(chuàng)建 css文件，引用
那個(gè)組件想要實(shí)現(xiàn)跳轉(zhuǎn)動(dòng)畫(huà)功能，就在那個(gè)組件的根節(jié)點(diǎn)綁定classname屬性即可
在跳轉(zhuǎn)的時(shí)候即可實(shí)現(xiàn)

到此這篇關(guān)于react路由動(dòng)畫(huà)跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)react路由動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

React Fiber構(gòu)建beginWork源碼解析
這篇文章主要為大家介紹了React Fiber構(gòu)建beginWork源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
詳解如何在React中執(zhí)行條件渲染
在現(xiàn)代Web開(kāi)發(fā)中,React作為一種流行的JavaScript庫(kù),為開(kāi)發(fā)者提供了一種高效構(gòu)建用戶(hù)界面的方式,條件渲染是React中的一個(gè)關(guān)鍵概念,本文將深入探討如何在React中實(shí)現(xiàn)條件渲染,并通過(guò)示例代碼演示常見(jiàn)的用法,需要的朋友可以參考下
2025-01-01
react新版本生命周期鉤子函數(shù)及用法詳解
這篇文章主要介紹了react新版本生命周期鉤子函數(shù)及用法詳解,本文通過(guò)示例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
Antd react上傳圖片格式限制的實(shí)現(xiàn)代碼
這篇文章主要介紹了Antd react上傳圖片格式限制的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼圖文效果給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2024-12-12
react之umi配置國(guó)際化語(yǔ)言locale的踩坑記錄
這篇文章主要介紹了react之umi配置國(guó)際化語(yǔ)言locale的踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
React中DOM事件和狀態(tài)介紹
這篇文章主要介紹了React中DOM事件和狀態(tài)介紹，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下
2022-08-08
react中監(jiān)聽(tīng)props的改變方式
這篇文章主要介紹了react中監(jiān)聽(tīng)props的改變方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
react antd實(shí)現(xiàn)動(dòng)態(tài)增減表單
antd是react流行的ui框架庫(kù)，本文主要介紹了react antd實(shí)現(xiàn)動(dòng)態(tài)增減表單，分享給大家，感興趣的小伙伴們可以參考一下
2021-06-06
React實(shí)現(xiàn)表單提交防抖功能的示例代碼
在 React 應(yīng)用中,防抖（Debounce）技術(shù)可以有效地限制函數(shù)在短時(shí)間內(nèi)的頻繁調(diào)用,下面我們就來(lái)看看如何使用Lodash庫(kù)中的debounce函數(shù)實(shí)現(xiàn)React表單提交中實(shí)現(xiàn)防抖功能吧
2024-01-01
使用React hook實(shí)現(xiàn)remember me功能
相信大家在使用 React 寫(xiě)頁(yè)面的時(shí)候都遇到過(guò)完成 Remember me 的需求吧！本文就將這個(gè)需求封裝在一個(gè) React hook 中以供后續(xù)的使用,覺(jué)得有用的同學(xué)可以收藏起來(lái)以備不時(shí)之需,感興趣的小伙伴跟著小編一起來(lái)看看吧
2024-04-04