在React中寫一個(gè)Animation組件為組件進(jìn)入和離開加上動畫/過度效果
問題
在單頁面應(yīng)用中,我們經(jīng)常需要給路由的切換或者元素的掛載和卸載加上過渡效果,為這么一個(gè)小功能引入第三方框架,實(shí)在有點(diǎn)小糾結(jié)。不如自己封裝。
思路
原理
以進(jìn)入時(shí) opacity: 0 --> opacity: 1 ,退出時(shí) opacity: 0 --> opacity: 1 為例
元素掛載時(shí)
1.掛載元素dom
2.設(shè)置動畫 opacity: 0 --> opacity: 1
元素卸載時(shí)
1.設(shè)置動畫 opacity: 0 --> opacity: 1
2.動畫結(jié)束后卸載dom
組件設(shè)計(jì)
為了使得組件簡單易用、低耦合,我們期望如下方式來調(diào)用組件:
屬性名 | 類型 | 描述 |
---|---|---|
isShow | Boolean | 子元素顯示或隱藏控制 |
name | String | 指定一個(gè)name,動畫進(jìn)入退出時(shí)的動畫 |
在 App.jsx 里調(diào)用組件:
通過改變isShow的值來指定是否顯示
// App.jsx // 其他代碼省略 import './app.css'; <Animation isShow={isShow} name='demo'> <div class='demo'> demo </div> </Animation> // 通過改變isShow的值來指定是否顯示 在 App.css 里指定進(jìn)入離開效果: // 基礎(chǔ)樣式 .demo { width: 200px; height: 200px; background-color: red; } // 定義進(jìn)出入動畫 .demo-showing { animation: show 0.5s forwards; } .demo-fading { animation: fade 0.5s forwards; } // 定義動畫fade與show @keyframes show { from { opacity: 0; } to { opacity: 1; } } @keyframes fade { from { opacity: 1; } to { opacity: 0; } }
根據(jù)思路寫代碼
// Animation.jsx import { PureComponent } from 'react'; import './index.css'; class Animation extends PureComponent { constructor(props) { super(props); this.state = { isInnerShow: false, animationClass: '', }; } componentWillReceiveProps(props) { const { isShow } = props; if (isShow) { // 顯示 this.show().then(() => { this.doShowAnimation(); }); } else { // 隱藏 this.doFadeAnimation(); } } handleAnimationEnd() { const isFading = this.state.animationClass === this.className('fading'); if (isFading) { this.hide(); } } show() { return new Promise(resolve => { this.setState( { isInnerShow: true, }, () => { resolve(); } ); }); } hide() { this.setState({ isInnerShow: false, }); } doShowAnimation() { this.setState({ animationClass: this.className('showing'), }); } doFadeAnimation() { this.setState({ animationClass: this.className('fading'), }); } /** * 獲取className * @param {string} inner 'showing' | 'fading' */ className(inner) { const { name } = this.props; if (!name) throw new Error('animation name must be assigned'); return `${name}-${inner}`; } render() { let { children } = this.props; children = React.Children.only(children); const { isInnerShow, animationClass } = this.state; const element = { ...children, props: { ...children.props, className: `${children.props.className} ${animationClass}`, onAnimationEnd: this.handleAnimationEnd.bind(this), }, }; return isInnerShow && element; } } export default Animation;
Demo示例
總結(jié)
以上所述是小編給大家介紹的在React中寫一個(gè)Animation組件為組件進(jìn)入和離開加上動畫/過度效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
React項(xiàng)目中axios的封裝與API接口的管理詳解
Axios是一個(gè)npm軟件包,允許應(yīng)用程序?qū)TTP請求發(fā)送到Web API,下面這篇文章主要給大家介紹了關(guān)于React項(xiàng)目中axios的封裝與API接口的管理的相關(guān)資料,需要的朋友可以參考下2021-09-09基于visual studio code + react 開發(fā)環(huán)境搭建過程
今天通過本文給大家分享基于visual studio code + react 開發(fā)環(huán)境搭建過程,本文給大家介紹的非常詳細(xì),包括react安裝問題及安裝 Debugger for Chrome的方法,需要的朋友跟隨小編一起看看吧2021-07-07React實(shí)現(xiàn)多個(gè)場景下鼠標(biāo)跟隨提示框詳解
這篇文章主要為大家介紹了React實(shí)現(xiàn)多個(gè)場景下鼠標(biāo)跟隨提示框詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09阿里低代碼框架lowcode-engine自定義設(shè)置器詳解
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設(shè)置器示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02