React過渡動畫組件基礎使用介紹
更新時間：2022年09月29日 08:38:48 作者：月光曬了很涼快
在開發(fā)中，我們想要給一個組件的顯示和消失添加某種過渡動畫，可以很好的增加用戶體驗。 當然，我們可以通過原生的CSS來實現(xiàn)這些過渡動畫，這篇文章主要介紹了React過渡動畫組件使用
1. 基礎使用
介紹：
在項目中可能會給一些組件的顯示或隱藏添加某種過渡動畫，這樣可以很好的增加用戶的使用體驗， react-transition-group 是 react 的第三方模塊，借助這個模塊可以實現(xiàn)動畫切換效果。
安裝：
yarn add react-transition-group
使用：
上面這張圖描述了一個動畫過渡的過程，它表示動畫在入場階段，透明度由0變?yōu)?，在出場階段，透明度由1變?yōu)?。
接下來我們實現(xiàn)一下上述過程：
父組件：
import React, { Component } from 'react'
// CSSTransition 讓元素有過渡效果，CSSTransition的子元素只能是一個
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 組件動畫時長 必須要有的屬性，單位是ms ,真實的動畫還得看寫css的動畫時間，也就是說這里的事件要和css中寫的動畫時間保持一致
in 動畫開關，進場或出場 它的值是一個boolean，true：進入，false：退場
classNames 指定動畫的樣式名稱或樣式定義的前綴名 {}|string，這個屬性可以防止重名
unmountOnExit 退場后，刪除動畫dom元素
appear 第1次，訪問時如果in為true，進行的動畫
*/}
<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit={true}
appear={true}
>
<div>
<h3>我是內(nèi)容</h3>
</div>
</CSSTransition>
</div>
)
}
}
export default Appcss樣式：
/* 進場起始和出場結束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
/* transform: scale(.6); */
}
/* 進場由0變?yōu)?的動畫時間 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
/* transform: scale(1); */
transition: opacity 300ms;
}
/* 出場由1變?yōu)?的動畫時間 */
.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 讓元素有過渡效果，CSSTransition子元素只能是一個
import { CSSTransition } from 'react-transition-group'
import 'animate.css'
// 注意這個文件要放在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 組件動畫時長 必須的屬性 ms ,真實的動畫還得看寫css的動畫時間
in 動畫開關，進場或出場 boolean true進入 false退場
classNames 指定動畫的樣式名稱或樣式定義的前綴名 {}|string
unmountOnExit 退場后，刪除動畫dom元素
*/}
<CSSTransition
in={show}
timeout={300}
// 自定義的類名
classNames={{
// 剛進入動畫
enter: 'animate__animated',
// 剛退出動畫
exit: 'animate__animated',
// 進入過程中
enterActive: 'animate__fadeIn',
// 退出過程中
exitActive: 'animate__fadeOut'
}}
// 默認為真，即刪除
unmountOnExit
>
<div style={{ display: 'inline-block' }}>
<h3>我是內(nèi)容</h3>
</div>
</CSSTransition>
</div>
)
}
}
export default App
css樣式：
:root {
/* 更改根節(jié)點中的元素的值 */
/* 動畫持續(xù)時間 */
--animate-duration: 300ms;
/* 動畫延遲 */
--animate-delay: 300ms;
}
/* 進場起始和出場結束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
/* transform: scale(.6); */
}
/* 進場由0變?yōu)?的動畫時間 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
/* transform: scale(1); */
transition: opacity 300ms;
}
/* 出場由1變?yōu)?的動畫時間 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
3. 列表過渡
介紹：
當需要用到多個 css 動畫過渡效果時，我們可以使用 TransitionGroup 組件將 CSSTransition 組件包裹起來，實現(xiàn)列表過渡。
注意：使用了 TransitionGroup 組件，則里面的 CSSTransition 屬性中的 in 無效，要用唯一不重復的 key 來代替換，且 key 的值必須為字符串類型，否則報錯。
使用：
父組件：
import React, { Component } from 'react'
// CSSTransition 讓元素有過渡效果，CSSTransition子元素只能是一個
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無效，用要唯一不重復的key來代替換 */}
{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() + '']
}))
}}
>
添加任務
</button>
</div>
)
}
}
export default Appcss樣式：
:root {
/* 更改根節(jié)點中的元素的值 */
/* 動畫持續(xù)時間 */
--animate-duration: 300ms;
/* 動畫延遲 */
--animate-delay: 300ms;
}
/* 進場起始和出場結束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
/* transform: scale(.6); */
}
/* 進場由0變?yōu)?的動畫時間 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
/* transform: scale(1); */
transition: opacity 300ms;
}
/* 出場由1變?yōu)?的動畫時間 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
4. switchTransition動畫
父組件：
import React, { Component } from 'react'
// CSSTransition 讓元素有過渡效果，CSSTransition子元素只能是一個
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>
{/*
動畫切換的模式
in-out 先進入，再退出
out-in 先退出，再進入 默認值
*/}
{/* <SwitchTransition mode='in-out'> */}
<SwitchTransition mode='out-in'>
{/* 在SwitchTransition中它要想有動畫，用key */}
<CSSTransition key={on ? 'a' : 'b'} timeout={300} classNames="fade">
<h3 style={{ display: 'inline-block' }}>{on ? '你好' : '再見'}</h3>
</CSSTransition>
</SwitchTransition>
<hr />
<button
onClick={() => {
this.setState(state => ({
on: !state.on
}))
}}
>
改變
</button>
</div>
)
}
}
export default Appcss樣式：
:root {
/* 更改根節(jié)點中的元素的值 */
/* 動畫持續(xù)時間 */
--animate-duration: 300ms;
/* 動畫延遲 */
--animate-delay: 300ms;
}
/* 進場起始和出場結束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
transform: scale(.6);
}
/* 進場由0變?yōu)?的動畫時間 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
transform: scale(1);
transition: opacity 300ms,transform 300ms;
}
/* 出場由1變?yōu)?的動畫時間 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
5. 路由切換過渡
父組件（注意這里的過渡動畫樣式 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>
{/* 把路由地址當做唯一不可重復的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é)點中的元素的值 */
/* 動畫持續(xù)時間 */
--animate-duration: 300ms;
/* 動畫延遲 */
--animate-delay: 300ms;
}
/* 進場起始和出場結束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
transform: scale(.6);
}
/* 進場由0變?yōu)?的動畫時間 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
transform: scale(1);
transition: opacity 300ms,transform 300ms;
}
/* 出場由1變?yōu)?的動畫時間 */
.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. 高階組件實現(xiàn)路由切換過渡
介紹：
有些時候路由會特別多，而有些路由需要動畫，有些則不需要，我們可以使用高階組件，將需要過渡動畫的路由用高階組件包裹，沒有包裹的路由則沒有過渡動畫。
使用：
父組件：
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 渲染方式，因為這種渲染方式，無論路由是否匹配到，路由對應的組件都在，都在才能添加動畫效果 */}
<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;
}
到此這篇關于React過渡動畫組件基礎使用介紹的文章就介紹到這了,更多相關React過渡動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了React Native功能豐富的Toast通知庫使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了詳解操作虛擬dom模擬react視圖渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
useState和useEffect是React的兩個重要Hook,用于組件狀態(tài)管理和處理副作用,useState允許添加狀態(tài)變量,控制組件渲染,而useEffect用于執(zhí)行渲染后的副作用操作,本文給大家介紹React中的useState和useEffect詳細解析,感興趣的朋友跟隨小編一起看看吧2024-10-10
React報錯map()?is?not?a?function詳析
這篇文章主要介紹了React報錯map()?is?not?a?function詳析，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了React中如何使用scss問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-12-12
這篇文章主要為大家詳細介紹了如何基于React封裝一個層次模糊效果的容器組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
React路由組件傳參的三種方式(params、search、state)
本文主要介紹了React路由組件傳參的三種方式，主要包括了params、search、state，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了React?Native采用Hermes熱更新打包實戰(zhàn),在傳統(tǒng)的熱更新方案中，我們實現(xiàn)熱更新需要借助code-push開源方案，包括熱更新包的發(fā)布兩種方式詳解，感興趣的朋友一起看看吧2022-05-05
這篇文章主要介紹了React中setState的異步操作案例詳解，文章圍繞主題展開詳細的內(nèi)容介紹，具有一點點參考價值，感興趣的小伙伴可以參考一下2022-08-08