您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)React中怎么實(shí)現(xiàn)一個(gè)動效彈窗組件,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
在 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> ); };
很多同學(xué)在自己實(shí)現(xiàn)動效時(shí),經(jīng)常是展示的時(shí)候有動效,關(guān)閉的時(shí)候沒有動效。都是動效的時(shí)機(jī)沒有控制好。這里我們先自己來實(shí)現(xiàn)一下動效的流轉(zhuǎn)。
剛開始我實(shí)現(xiàn)的時(shí)候,動效只有開始狀態(tài)和結(jié)束狀態(tài),需要很多的變量和邏輯來控制這個(gè)動效。
后來我參考了react-transition-group
組件的實(shí)現(xiàn),他是將動效拆分成了幾個(gè)部分,每個(gè)部分分別進(jìn)行控制。
展開動效的順序:enter -> enter-active -> enter-done;
關(guān)閉動效的順序:exit -> exit-active -> exit-done;
動效過程在enter-active
和exit-active
的過程中。
我們再通過一個(gè)變量 active 來控制是關(guān)閉動效是否已執(zhí)行關(guān)閉,參數(shù) open 只控制是執(zhí)行展開動效還是關(guān)閉動效。
當(dāng) open 和 active 都為 false 時(shí),才銷毀彈窗。
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時(shí),則結(jié)束狀態(tài)為'enter-done' // 當(dāng)open未false時(shí),則結(jié)束狀態(tài)為'exit-done' setAniClassName(open ? 'enter-done' : 'exit-done'); // 若open為false,則動畫結(jié)束時(shí),彈窗的生命周期結(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 效果,修改這幾個(gè) class 就行。
一個(gè)帶有動效的彈窗就已經(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> ); };
3. react-transition-group
我們在實(shí)現(xiàn)動效的思路上借鑒了 react-transition-group 中的CSSTransition組件。CSSTransition
已經(jīng)幫我封裝好了動效展開和關(guān)閉的過程,我們在實(shí)現(xiàn)彈窗時(shí),可以直接使用該組件。
這里有一個(gè)重要的屬性: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 的動效就方便多了。
看完上述內(nèi)容,你們對React中怎么實(shí)現(xiàn)一個(gè)動效彈窗組件有進(jìn)一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。