React過(guò)渡動(dòng)畫(huà)組件基礎(chǔ)使用介紹
更新時(shí)間：2022年09月29日 08:38:48 作者：月光曬了很涼快
在開(kāi)發(fā)中，我們想要給一個(gè)組件的顯示和消失添加某種過(guò)渡動(dòng)畫(huà)，可以很好的增加用戶體驗(yàn)。 當(dāng)然，我們可以通過(guò)原生的CSS來(lái)實(shí)現(xiàn)這些過(guò)渡動(dòng)畫(huà)，這篇文章主要介紹了React過(guò)渡動(dòng)畫(huà)組件使用
1. 基礎(chǔ)使用
介紹：
在項(xiàng)目中可能會(huì)給一些組件的顯示或隱藏添加某種過(guò)渡動(dòng)畫(huà)，這樣可以很好的增加用戶的使用體驗(yàn)， react-transition-group 是 react 的第三方模塊，借助這個(gè)模塊可以實(shí)現(xiàn)動(dòng)畫(huà)切換效果。
安裝：
yarn add react-transition-group
使用：
上面這張圖描述了一個(gè)動(dòng)畫(huà)過(guò)渡的過(guò)程，它表示動(dòng)畫(huà)在入場(chǎng)階段，透明度由0變?yōu)?，在出場(chǎng)階段，透明度由1變?yōu)?。
接下來(lái)我們實(shí)現(xiàn)一下上述過(guò)程：
父組件：
import React, { Component } from 'react'
// CSSTransition 讓元素有過(guò)渡效果，CSSTransition的子元素只能是一個(gè)
import { CSSTransition } from 'react-transition-group'
import './style/transistion.css'
class App extends Component {
state = {
show: true
}
render() {
const { show } = this.state
return (
<div>
<button onClick={() => this.setState(state => ({ show: !state.show }))}>顯示/隱藏</button>
<hr />
{/*
重要屬性
timeout 組件動(dòng)畫(huà)時(shí)長(zhǎng) 必須要有的屬性，單位是ms ,真實(shí)的動(dòng)畫(huà)還得看寫(xiě)css的動(dòng)畫(huà)時(shí)間，也就是說(shuō)這里的事件要和css中寫(xiě)的動(dòng)畫(huà)時(shí)間保持一致
in 動(dòng)畫(huà)開(kāi)關(guān)，進(jìn)場(chǎng)或出場(chǎng) 它的值是一個(gè)boolean，true：進(jìn)入，false：退場(chǎng)
classNames 指定動(dòng)畫(huà)的樣式名稱或樣式定義的前綴名 {}|string，這個(gè)屬性可以防止重名
unmountOnExit 退場(chǎng)后，刪除動(dòng)畫(huà)dom元素
appear 第1次，訪問(wèn)時(shí)如果in為true，進(jìn)行的動(dòng)畫(huà)
*/}
<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit={true}
appear={true}
>
<div>
<h3>我是內(nèi)容</h3>
</div>
</CSSTransition>
</div>
)
}
}
export default Appcss樣式：
/* 進(jìn)場(chǎng)起始和出場(chǎng)結(jié)束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
/* transform: scale(.6); */
}
/* 進(jìn)場(chǎng)由0變?yōu)?的動(dòng)畫(huà)時(shí)間 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
/* transform: scale(1); */
transition: opacity 300ms;
}
/* 出場(chǎng)由1變?yōu)?的動(dòng)畫(huà)時(shí)間 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
2. 將animate.css集成到csstranistion中
安裝：
yarn add animate.css
使用：
父組件：
import React, { Component } from 'react'
// CSSTransition 讓元素有過(guò)渡效果，CSSTransition子元素只能是一個(gè)
import { CSSTransition } from 'react-transition-group'
import 'animate.css'
// 注意這個(gè)文件要放在animate.css的下面，防止覆蓋
import './style/transistion.css'
class App extends Component {
state = {
show: true
}
render() {
const { show } = this.state
return (
<div>
<button onClick={() => this.setState(state => ({ show: !state.show }))}>顯示/隱藏</button>
<hr />
{/*
重要屬性
timeout 組件動(dòng)畫(huà)時(shí)長(zhǎng) 必須的屬性 ms ,真實(shí)的動(dòng)畫(huà)還得看寫(xiě)css的動(dòng)畫(huà)時(shí)間
in 動(dòng)畫(huà)開(kāi)關(guān)，進(jìn)場(chǎng)或出場(chǎng) boolean true進(jìn)入 false退場(chǎng)
classNames 指定動(dòng)畫(huà)的樣式名稱或樣式定義的前綴名 {}|string
unmountOnExit 退場(chǎng)后，刪除動(dòng)畫(huà)dom元素
*/}
<CSSTransition
in={show}
timeout={300}
// 自定義的類(lèi)名
classNames={{
// 剛進(jìn)入動(dòng)畫(huà)
enter: 'animate__animated',
// 剛退出動(dòng)畫(huà)
exit: 'animate__animated',
// 進(jìn)入過(guò)程中
enterActive: 'animate__fadeIn',
// 退出過(guò)程中
exitActive: 'animate__fadeOut'
}}
// 默認(rèn)為真，即刪除
unmountOnExit
>
<div style={{ display: 'inline-block' }}>
<h3>我是內(nèi)容</h3>
</div>
</CSSTransition>
</div>
)
}
}
export default App
css樣式：
:root {
/* 更改根節(jié)點(diǎn)中的元素的值 */
/* 動(dòng)畫(huà)持續(xù)時(shí)間 */
--animate-duration: 300ms;
/* 動(dòng)畫(huà)延遲 */
--animate-delay: 300ms;
}
/* 進(jìn)場(chǎng)起始和出場(chǎng)結(jié)束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
/* transform: scale(.6); */
}
/* 進(jìn)場(chǎng)由0變?yōu)?的動(dòng)畫(huà)時(shí)間 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
/* transform: scale(1); */
transition: opacity 300ms;
}
/* 出場(chǎng)由1變?yōu)?的動(dòng)畫(huà)時(shí)間 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
3. 列表過(guò)渡
介紹：
當(dāng)需要用到多個(gè) css 動(dòng)畫(huà)過(guò)渡效果時(shí)，我們可以使用 TransitionGroup 組件將 CSSTransition 組件包裹起來(lái)，實(shí)現(xiàn)列表過(guò)渡。
注意：使用了 TransitionGroup 組件，則里面的 CSSTransition 屬性中的 in 無(wú)效，要用唯一不重復(fù)的 key 來(lái)代替換，且 key 的值必須為字符串類(lèi)型，否則報(bào)錯(cuò)。
使用：
父組件：
import React, { Component } from 'react'
// CSSTransition 讓元素有過(guò)渡效果，CSSTransition子元素只能是一個(gè)
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './style/transistion.css'
class App extends Component {
state = {
todos: []
}
render() {
const { todos } = this.state
return (
<div>
<TransitionGroup>
{/* 使用了TransitionGroup組件，則里面的CSSTransition屬性in無(wú)效，用要唯一不重復(fù)的key來(lái)代替換 */}
{todos.map((item, index) => (
<CSSTransition key={index + ''} timeout={300} classNames="fade" unmountOnExit>
<div>
<span>{item}</span>
<span
onClick={() => {
this.setState(state => ({
todos: state.todos.filter(val => val != item)
}))
}}
>
-- 刪除
</span>
</div>
</CSSTransition>
))}
</TransitionGroup>
<hr />
<button
onClick={() => {
this.setState(state => ({
todos: [...state.todos, Date.now() + '']
}))
}}
>
添加任務(wù)
</button>
</div>
)
}
}
export default Appcss樣式：
:root {
/* 更改根節(jié)點(diǎn)中的元素的值 */
/* 動(dòng)畫(huà)持續(xù)時(shí)間 */
--animate-duration: 300ms;
/* 動(dòng)畫(huà)延遲 */
--animate-delay: 300ms;
}
/* 進(jìn)場(chǎng)起始和出場(chǎng)結(jié)束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
/* transform: scale(.6); */
}
/* 進(jìn)場(chǎng)由0變?yōu)?的動(dòng)畫(huà)時(shí)間 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
/* transform: scale(1); */
transition: opacity 300ms;
}
/* 出場(chǎng)由1變?yōu)?的動(dòng)畫(huà)時(shí)間 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
4. switchTransition動(dòng)畫(huà)
父組件：
import React, { Component } from 'react'
// CSSTransition 讓元素有過(guò)渡效果，CSSTransition子元素只能是一個(gè)
import { CSSTransition, SwitchTransition } from 'react-transition-group'
import './style/transistion.css'
class App extends Component {
state = {
on: true
}
render() {
const { on } = this.state
return (
<div>
{/*
動(dòng)畫(huà)切換的模式
in-out 先進(jìn)入，再退出
out-in 先退出，再進(jìn)入 默認(rèn)值
*/}
{/* <SwitchTransition mode='in-out'> */}
<SwitchTransition mode='out-in'>
{/* 在SwitchTransition中它要想有動(dòng)畫(huà)，用key */}
<CSSTransition key={on ? 'a' : 'b'} timeout={300} classNames="fade">
<h3 style={{ display: 'inline-block' }}>{on ? '你好' : '再見(jiàn)'}</h3>
</CSSTransition>
</SwitchTransition>
<hr />
<button
onClick={() => {
this.setState(state => ({
on: !state.on
}))
}}
>
改變
</button>
</div>
)
}
}
export default Appcss樣式：
:root {
/* 更改根節(jié)點(diǎn)中的元素的值 */
/* 動(dòng)畫(huà)持續(xù)時(shí)間 */
--animate-duration: 300ms;
/* 動(dòng)畫(huà)延遲 */
--animate-delay: 300ms;
}
/* 進(jìn)場(chǎng)起始和出場(chǎng)結(jié)束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
transform: scale(.6);
}
/* 進(jìn)場(chǎng)由0變?yōu)?的動(dòng)畫(huà)時(shí)間 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
transform: scale(1);
transition: opacity 300ms,transform 300ms;
}
/* 出場(chǎng)由1變?yōu)?的動(dòng)畫(huà)時(shí)間 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
5. 路由切換過(guò)渡
父組件（注意這里的過(guò)渡動(dòng)畫(huà)樣式 css 文件已在入口文件引入）：
import React, { Component } from 'react'
import { Switch, Route, Link, withRouter } from 'react-router-dom'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import RenderCmp from './views/Render'
import Login from './views/Login'
@withRouter
class App extends Component {
render() {
return (
<div>
<Link to="/login">login</Link> --
<Link to="/render">render</Link>
<hr />
{/* 用 TransitionGroup 一包裹，就不用定義in屬性了 */}
<TransitionGroup>
{/* 把路由地址當(dāng)做唯一不可重復(fù)的key值 */}
<CSSTransition timeout={300} key={this.props.location.key} classNames="router">
<Switch>
<Route path="/login" component={Login} />
<Route path="/render" component={RenderCmp} />
</Switch>
</CSSTransition>
</TransitionGroup>
</div>
)
}
}
export default Appcss樣式：
:root {
/* 更改根節(jié)點(diǎn)中的元素的值 */
/* 動(dòng)畫(huà)持續(xù)時(shí)間 */
--animate-duration: 300ms;
/* 動(dòng)畫(huà)延遲 */
--animate-delay: 300ms;
}
/* 進(jìn)場(chǎng)起始和出場(chǎng)結(jié)束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
transform: scale(.6);
}
/* 進(jìn)場(chǎng)由0變?yōu)?的動(dòng)畫(huà)時(shí)間 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
transform: scale(1);
transition: opacity 300ms,transform 300ms;
}
/* 出場(chǎng)由1變?yōu)?的動(dòng)畫(huà)時(shí)間 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
/* ---------------------------------- */
.router-enter {
opacity: 0;
}
.router-enter-active {
opacity: 1;
transition: all 300ms;
}
.router-exit-active {
opacity: 0;
transition: all 0ms;
}
6. 高階組件實(shí)現(xiàn)路由切換過(guò)渡
介紹：
有些時(shí)候路由會(huì)特別多，而有些路由需要?jiǎng)赢?huà)，有些則不需要，我們可以使用高階組件，將需要過(guò)渡動(dòng)畫(huà)的路由用高階組件包裹，沒(méi)有包裹的路由則沒(méi)有過(guò)渡動(dòng)畫(huà)。
使用：
父組件：
import React, { Component } from 'react'
import { Route, Link, withRouter } from 'react-router-dom'
import RenderCmp from './views/Render'
import Login from './views/Login'
@withRouter
class App extends Component {
render() {
return (
<div>
<Link to="/login">login</Link> --
<Link to="/render">render</Link>
<hr />
{/* 這里用 children 渲染方式，因?yàn)檫@種渲染方式，無(wú)論路由是否匹配到，路由對(duì)應(yīng)的組件都在，都在才能添加動(dòng)畫(huà)效果 */}
<Route path="/login" children={router => <Login {...router} />} />
<Route path="/render" children={router => <RenderCmp {...router} />} />
</div>
)
}
}
export default App子組件：
import React, { Component } from 'react'
import withTransition from '../../hoc/withTransition'
@withTransition
class Login extends Component {
render() {
return (
<div>
<h3>用戶登錄</h3>
<button
onClick={() => {
sessionStorage.setItem('uid', 1)
this.props.history.push('/render')
}}
>
登錄一下
</button>
</div>
)
}
}
export default Login定義高階組件：
import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group'
const withTransition = Cmp => {
return class extends Component {
render() {
return (
<>
<CSSTransition
in={this.props.match ? true : false}
timeout={300}
classNames='fade'
unmountOnExit
>
<>
{this.props.match
? <Cmp {...this.props} /> : <div></div>}
</>
</CSSTransition>
</>
);
}
}
}
export default withTransitioncss樣式：
.router-enter {
opacity: 0;
}
.router-enter-active {
opacity: 1;
transition: all 300ms;
}
.router-exit-active {
opacity: 0;
transition: all 0ms;
}
到此這篇關(guān)于React過(guò)渡動(dòng)畫(huà)組件基礎(chǔ)使用介紹的文章就介紹到這了,更多相關(guān)React過(guò)渡動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用React-Router時(shí)出現(xiàn)的錯(cuò)誤及解決
這篇文章主要介紹了使用React-Router時(shí)出現(xiàn)的錯(cuò)誤及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
React中setState/useState的使用方法詳細(xì)介紹
這篇文章主要介紹了React中setState/useState的使用方法，useState 和 setState 在React開(kāi)發(fā)過(guò)程中 使用很頻繁，但很多人都停留在簡(jiǎn)單的使用階段，并沒(méi)有正在了解它們的執(zhí)行機(jī)制2023-04-04
ReactNative?狀態(tài)管理redux使用詳解
這篇文章主要介紹了ReactNative?狀態(tài)管理redux使用詳解2023-03-03
react中使用better-scroll滾動(dòng)插件的實(shí)現(xiàn)示例
滾動(dòng)在很多地方都可以使用，本文主要介紹了react中使用better-scroll滾動(dòng)插件的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家詳細(xì)介紹了react中JSX的注意點(diǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
React實(shí)現(xiàn)父子組件有效通信的多種方式
在React中,父子組件之間的通信是一個(gè)重要的概念,它直接影響到數(shù)據(jù)傳遞和組件的交互,了解如何實(shí)現(xiàn)父子組件之間的有效通信,可以幫助你構(gòu)建更高效、可維護(hù)的應(yīng)用,本文將詳細(xì)探討父子組件通信的多種方式,包括屬性傳遞、回調(diào)函數(shù)、上下文API、以及更高級(jí)的狀態(tài)管理解決方案,2025-07-07
React 組件的重復(fù)渲染是開(kāi)發(fā)中常見(jiàn)的性能問(wèn)題之一,尤其是在大型應(yīng)用中,組件的頻繁渲染會(huì)導(dǎo)致性能瓶頸,本文將探討 React 組件重復(fù)渲染的常見(jiàn)原因,并提供優(yōu)化策略,幫助開(kāi)發(fā)者提升應(yīng)用性能,需要的朋友可以參考下2025-03-03
在React項(xiàng)目中,我們經(jīng)常會(huì)使用到React自帶的幾個(gè)內(nèi)置Hooks，如 useState，useContext和useEffect。雖然在React中找不到這些 Hooks，但React提供了非常靈活的方式讓你為自己的需求來(lái)創(chuàng)建自己的自定義Hooks，想了解更多的，歡迎閱讀本文2023-04-04
React-Router v6實(shí)現(xiàn)頁(yè)面級(jí)按鈕權(quán)限示例詳解
這篇文章主要介紹了使用 reac+reactRouter來(lái)實(shí)現(xiàn)頁(yè)面級(jí)的按鈕權(quán)限功能,這篇文章分三部分,實(shí)現(xiàn)思路、代碼實(shí)現(xiàn)、踩坑記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助2023-10-10
React中 Zustand狀態(tài)管理庫(kù)的使用詳解
Zustand?是一個(gè)非常輕量、簡(jiǎn)潔的狀態(tài)管理庫(kù),旨在為 React 提供簡(jiǎn)便且高效的狀態(tài)管理,相比于 Redux 或 Context API,Zustand 具有更簡(jiǎn)潔、靈活和易于理解的優(yōu)點(diǎn),感興趣的朋友一起看看吧2024-12-12