快捷導(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名稱

<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開(kāi)啟代理的2種實(shí)用方式
最近有不少伙伴詢問(wèn)react的代理配置,自己也去試驗(yàn)了一下發(fā)現(xiàn)不少的問(wèn)題,在這就將所遇到的心得分享出來(lái),這篇文章主要給大家介紹了關(guān)于React開(kāi)啟代理的2種實(shí)用方式的相關(guān)資料,需要的朋友可以參考下
2021-07-07
詳解如何給React-Router添加路由頁(yè)面切換時(shí)的過(guò)渡動(dòng)畫(huà)
這篇文章主要介紹了詳解如何給React-Router添加路由頁(yè)面切換時(shí)的過(guò)渡動(dòng)畫(huà)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
關(guān)于React Native 無(wú)法鏈接模擬器的問(wèn)題
許多朋友遇到React Native 無(wú)法鏈接模擬器的問(wèn)題，怎么解決呢，本文給大家分享完整簡(jiǎn)便解決方法及配置例題，對(duì)React Native 鏈接模擬器相關(guān)知識(shí)感興趣的朋友一起看看吧
2021-06-06
react裝飾器與高階組件及簡(jiǎn)單樣式修改的操作詳解
這篇文章主要介紹了react裝飾器與高階組件及簡(jiǎn)單樣式修改的操作，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-09-09
解決React報(bào)錯(cuò)React?Hook?useEffect?has?a?missing?dependency
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)React?Hook?useEffect?has?a?missing?dependency，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
高性能React開(kāi)發(fā)React Server Components詳解
ReactServerComponents通過(guò)服務(wù)器端渲染、自動(dòng)代碼分割等技術(shù),實(shí)現(xiàn)了高性能的React開(kāi)發(fā),它解決了客戶端數(shù)據(jù)請(qǐng)求鏈?zhǔn)窖舆t、敏感數(shù)據(jù)暴露風(fēng)險(xiǎn)等問(wèn)題,提供了更好的用戶體驗(yàn)和安全性,本文介紹高性能React開(kāi)發(fā)React Server Components詳解,感興趣的朋友一起看看吧
2025-03-03
React路由的history對(duì)象的插件history的使用解讀
這篇文章主要介紹了React路由的history對(duì)象的插件history的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
react native仿微信PopupWindow效果的實(shí)例代碼
本篇文章主要介紹了react native仿微信PopupWindow效果的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-08-08
React手寫(xiě)簽名組件react-signature實(shí)現(xiàn)簽字demo
這篇文章主要為大家介紹了React手寫(xiě)簽名組件react-signature實(shí)現(xiàn)簽字demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-12-12
React如何創(chuàng)建組件
本文我們將介紹 React中組件的類別，以及如何創(chuàng)建和使用組件。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06