React實(shí)現(xiàn)動效彈窗組件
我們在寫一些 UI 組件時,若不考慮動效,就很容易實(shí)現(xiàn),主要就是有無的切換(類似于 Vue 中的 v-if 屬性)或者可見性的切換(類似于 Vue 中的 v-show 屬性)。
1. 沒有動效的彈窗
在 React 中,可以這樣來實(shí)現(xiàn):
interface ModalProps { open: boolean; onClose?: () => void; children?: any; } const Modal = ({open. onClose, children}: ModalProps) => { if (!open) { return null; } return createPortal(<div> <div classname="modal-content">{children}</div> <div classname="modal-close-btn" onclick="{onClose}">x</div> </div>, document.body); };
使用方式:
const App = () => { const [open, setOpen] = useState(false); return ( <div classname="app"> <button onclick="{()" ==""> setOpen(true)}>show modal</button> <modal open="{open}" onclose="{()" ==""> setOpen(false)}> modal content </modal> </div> ); };
我們在這里就是使用open
屬性來控制展示還是不展示,但完全沒有漸變的效果。
若我們想實(shí)現(xiàn) fade, zoom 等動畫效果,還需要對此進(jìn)行改造。
2. 自己動手實(shí)現(xiàn)有動效的彈窗
很多同學(xué)在自己實(shí)現(xiàn)動效時,經(jīng)常是展示的時候有動效,關(guān)閉的時候沒有動效。都是動效的時機(jī)沒有控制好。這里我們先自己來實(shí)現(xiàn)一下動效的流轉(zhuǎn)。
剛開始我實(shí)現(xiàn)的時候,動效只有開始狀態(tài)和結(jié)束狀態(tài),需要很多的變量和邏輯來控制這個動效。
后來我參考了react-transition-group
組件的實(shí)現(xiàn),他是將動效拆分成了幾個部分,每個部分分別進(jìn)行控制。
- 展開動效的順序:enter -> enter-active -> enter-done;
- 關(guān)閉動效的順序:exit -> exit-active -> exit-done;
動效過程在enter-active
和exit-active
的過程中。
我們再通過一個變量 active 來控制是關(guān)閉動效是否已執(zhí)行關(guān)閉,參數(shù) open 只控制是執(zhí)行展開動效還是關(guān)閉動效。
當(dāng) open 和 active 都為 false 時,才銷毀彈窗。
const Modal = ({ open, children, onClose }) => { const [active, setActive] = useState(false); // 彈窗的存在周期 if (!open && !active) { return null; } return ReactDOM.createPortal( <div classname="modal"> <div classname="modal-content">{children}</div> <div classname="modal-close-btn" onclick="{onClose}"> x </div> </div>, document.body, ); };
這里我們接著添加動效過程的變化:
const [aniClassName, setAniClassName] = useState(''); // 動效的class // transition執(zhí)行完畢的監(jiān)聽函數(shù) const onTransitionEnd = () => { // 當(dāng)open為rue時,則結(jié)束狀態(tài)為'enter-done' // 當(dāng)open未false時,則結(jié)束狀態(tài)為'exit-done' setAniClassName(open ? 'enter-done' : 'exit-done'); // 若open為false,則動畫結(jié)束時,彈窗的生命周期結(jié)束 if (!open) { setActive(false); } }; useEffect(() => { if (open) { setActive(true); setAniClassName('enter'); // setTimeout用來切換class,讓transition動起來 setTimeout(() => { setAniClassName('enter-active'); }); } else { setAniClassName('exit'); setTimeout(() => { setAniClassName('exit-active'); }); } }, [open]);
Modal 組件完整的代碼如下:
const Modal = ({ open, children, onClose }) => { const [active, setActive] = useState(false); // 彈窗的存在周期 const [aniClassName, setAniClassName] = useState(''); // 動效的class const onTransitionEnd = () => { setAniClassName(open ? 'enter-done' : 'exit-done'); if (!open) { setActive(false); } }; useEffect(() => { if (open) { setActive(true); setAniClassName('enter'); setTimeout(() => { setAniClassName('enter-active'); }); } else { setAniClassName('exit'); setTimeout(() => { setAniClassName('exit-active'); }); } }, [open]); if (!open && !active) { return null; } return ReactDOM.createPortal( <div classname="{'modal" '="" +="" aniclassname}="" ontransitionend="{onTransitionEnd}"> <div classname="modal-content">{children}</div> <div classname="modal-close-btn" onclick="{onClose}"> x </div> </div>, document.body, ); };
動效的流轉(zhuǎn)過程已經(jīng)實(shí)現(xiàn)了,樣式也要一起寫上。比如我們要實(shí)現(xiàn)漸隱漸現(xiàn)的 fade 效果:
.enter { opacity: 0; } .enter-active { transition: opacity 200ms ease-in-out; opacity: 1; } .enter-done { opacity: 1; } .exit { opacity: 1; } .exit-active { opacity: 0; transition: opacity 200ms ease-in-out; } .exit-done { opacity: 0; }
如果是要實(shí)現(xiàn)放大縮小的 zoom 效果,修改這幾個 class 就行。
一個帶有動效的彈窗就已經(jīng)實(shí)現(xiàn)了。
使用方式:
const App = () => { const [open, setOpen] = useState(false); return ( <div classname="app"> <button onclick="{()" ==""> setOpen(true)}>show modal</button> <modal open="{open}" onclose="{()" ==""> setOpen(false)}> modal content </modal> </div> ); };
點(diǎn)擊鏈接自己實(shí)現(xiàn)動效的 React 彈窗 demo查看效果。
類似地,還有 Toast 之類的,也可以這樣實(shí)現(xiàn)。
3. react-transition-group
我們在實(shí)現(xiàn)動效的思路上借鑒了 react-transition-group 中的CSSTransition組件。CSSTransition
已經(jīng)幫我封裝好了動效展開和關(guān)閉的過程,我們在實(shí)現(xiàn)彈窗時,可以直接使用該組件。
這里有一個重要的屬性:unmountOnExit
,表示在動效結(jié)束后,卸載該組件。
const Modal = ({ open, onClose }) => { // http://reactcommunity.org/react-transition-group/css-transition/ // in屬性為true/false,true為展開動效,false為關(guān)閉動效 return createPortal( <csstransition in="{open}" timeout="{200}" unmountonexit=""> <div classname="modal"> <div classname="modal-content">{children}</div> <div classname="modal-close-btn" onclick="{onClose}"> x </div> </div> </csstransition>, document.body, ); };
在使用 CSSTransition 組件后,Modal 的動效就方便多了。
4. 總結(jié)
至此已把待動效的 React Modal 組件實(shí)現(xiàn)出來了。雖然 React 中沒有類似 Vue 官方定義的<transition>
標(biāo)簽,不過我們可以自己或者借助第三方組件來實(shí)現(xiàn)。
以上就是React實(shí)現(xiàn)動效彈窗組件的詳細(xì)內(nèi)容,更多關(guān)于React彈窗組件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React報(bào)錯Type '() => JSX.Element[]&apos
這篇文章主要為大家介紹了React報(bào)錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12詳解create-react-app 自定義 eslint 配置
這篇文章主要介紹了詳解create-react-app 自定義 eslint 配置,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06React數(shù)據(jù)傳遞之組件內(nèi)部通信的方法
這篇文章主要介紹了React數(shù)據(jù)傳遞之組件內(nèi)部通信的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12react性能優(yōu)化達(dá)到最大化的方法 immutable.js使用的必要性
這篇文章主要為大家詳細(xì)介紹了react性能優(yōu)化達(dá)到最大化的方法,一步一步優(yōu)化react性能的過程,告訴大家使用immutable.js的必要性,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03淺析history 和 react-router 的實(shí)現(xiàn)原理
react-router 版本更新非常快,但是它的底層實(shí)現(xiàn)原理確是萬變不離其中,在本文中會從前端路由出發(fā)到 react-router 原理總結(jié)與分享,本文對history 和 react-router實(shí)現(xiàn)原理講解的非常詳細(xì),需要的朋友跟隨小編一起看看吧2023-08-08React?useEffect不支持async?function示例分析
這篇文章主要為大家介紹了React?useEffect不支持async?function示例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07React實(shí)現(xiàn)antdM的級聯(lián)菜單實(shí)例
這篇文章主要為大家介紹了React實(shí)現(xiàn)antdM的級聯(lián)菜單實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10