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