react實(shí)現(xiàn)路由動畫跳轉(zhuǎn)功能
更新時(shí)間：2023年10月16日 12:19:16 作者：能再說一次晚安嗎
這篇文章主要介紹了react路由動畫跳轉(zhuǎn)功能,大概思路是下載第三方庫?引用,創(chuàng)建css文件引用,想要實(shí)現(xiàn)跳轉(zhuǎn)動畫功能,就在那個(gè)組件的根節(jié)點(diǎn)綁定classname屬性即可,在跳轉(zhuǎn)的時(shí)候即可實(shí)現(xiàn),需要的朋友可以參考下
react路由動畫跳轉(zhuǎn)
1.先在react項(xiàng)目中下載一個(gè)css第三方庫。用npm或者yarn
// 第三方庫下載 npm install animate.css --save yarn add animate.css
2.在react組件中引用這個(gè)css庫
// 引用庫 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動畫網(wǎng)址 鏈接: 點(diǎn)擊到https://animate.style/
7.總結(jié)：
下載 第三方庫 引用
創(chuàng)建 css文件，引用
那個(gè)組件想要實(shí)現(xiàn)跳轉(zhuǎn)動畫功能，就在那個(gè)組件的根節(jié)點(diǎn)綁定classname屬性即可
在跳轉(zhuǎn)的時(shí)候即可實(shí)現(xiàn)
到此這篇關(guān)于react路由動畫跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)react路由動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React Fiber構(gòu)建beginWork源碼解析
這篇文章主要為大家介紹了React Fiber構(gòu)建beginWork源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
在現(xiàn)代Web開發(fā)中,React作為一種流行的JavaScript庫,為開發(fā)者提供了一種高效構(gòu)建用戶界面的方式,條件渲染是React中的一個(gè)關(guān)鍵概念,本文將深入探討如何在React中實(shí)現(xiàn)條件渲染,并通過示例代碼演示常見的用法,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了react新版本生命周期鉤子函數(shù)及用法詳解,本文通過示例圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
Antd react上傳圖片格式限制的實(shí)現(xiàn)代碼
這篇文章主要介紹了Antd react上傳圖片格式限制的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼圖文效果給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了react之umi配置國際化語言locale的踩坑記錄，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了React中DOM事件和狀態(tài)介紹，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了react中監(jiān)聽props的改變方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
react antd實(shí)現(xiàn)動態(tài)增減表單
antd是react流行的ui框架庫，本文主要介紹了react antd實(shí)現(xiàn)動態(tài)增減表單，分享給大家，感興趣的小伙伴們可以參考一下2021-06-06
React實(shí)現(xiàn)表單提交防抖功能的示例代碼
在 React 應(yīng)用中,防抖（Debounce）技術(shù)可以有效地限制函數(shù)在短時(shí)間內(nèi)的頻繁調(diào)用,下面我們就來看看如何使用Lodash庫中的debounce函數(shù)實(shí)現(xiàn)React表單提交中實(shí)現(xiàn)防抖功能吧2024-01-01
使用React hook實(shí)現(xiàn)remember me功能
相信大家在使用 React 寫頁面的時(shí)候都遇到過完成 Remember me 的需求吧！本文就將這個(gè)需求封裝在一個(gè) React hook 中以供后續(xù)的使用,覺得有用的同學(xué)可以收藏起來以備不時(shí)之需,感興趣的小伙伴跟著小編一起來看看吧2024-04-04