React實現動效彈窗元件
我們在寫一些 UI 元件時,若不考慮動效,就很容易實現,主要就是有無的切換(類似於 vue 中的 v-if 屬性)或者可見性的切換(類似於 Vue 中的 v-show 屬性)。
1. 沒有動效的彈窗
在 React 中,可以這樣來實現:
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
屬性來控制展示還是不展示,但完全沒有漸變的效果。
若我們想實現 fade,zoom 等動畫效果,還需要對此進行改造。
2. 自己動手實現有動效的彈窗
很多同學在自己實現動效時,經常是展示的時候有動效,關閉的時候沒有動效。都是動效的時機沒有控制好。這裡我們先自己來實現一下動效的流轉。
剛開始我實現的時候,動效只有開始狀態和結束狀態,需要很多的變數和邏輯來控制這個動效。
後來我參考了react-transition-group
元件的實現,他是將動效拆分成了幾個部分,每個部分分別進行控制。
- 展開動效的順序:enter -> enter-active -> enter-done;
- 關閉動效的順序:exit -> exit-active -> exit-done;
動效過程在enter-active
和exit-active
的過程中。
我們再通過一個變數 active 來控制是關閉動效是否已執行關閉,引數 open 只控制是執行展開動效還是關閉動效。
當 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執行完畢的監聽函式 const onTransitionEnd = () => { // 當open為rue時,則結束狀態為'enter-done' // 當open未false時,則結束狀態為'exit-done' setAniClassName(open ? 'enter-done' : 'exit-done'); // 若open為false,則動畫結束時,彈窗的生命週期結束 if (!open) { setActive(false); } }; useEffect((www.cppcns.com) => { 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,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>,); };
動效的流轉過程已經實現了,樣式也要一起寫上。比如我們要實現漸隱漸現的 fade 效果:
.enter { opacity: 0; } .enter-active { transition: opacity 200ms ease-i程式設計客棧n-out; opacity: 1; } .enter-done { opacity: 1; } .exit { opacity: 1; } .exit-active { opacity: 0; transition: opacity 200ms ease-in-out; } .exit-done { opacity: 0; }
如果是要實現放大縮小的 zoom 效果,修改這幾個 class 就行。
一個帶有動效的彈窗就已經實現了。
使用方式:
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> ); };
點選連結自己實現動效的 React 彈窗 demo檢視效果。
類似地,還有 Toast 之類的,也可以這樣實現。
3. react-transition-group
我們在實現動效的思路上借鑑了 react-transition-group 中的cssTransition元件。CSSTransition
已經幫我封裝好了動效展開和關閉的過程,我們在實現彈窗時,可以直接使用該元件。
這裡有一個重要的屬性:unmountOnExit
,表示在動效結束後,解除安裝該元件。
const Modal = ({ open,onClose }) => { // http://reactcommunity.org/react-transition-gro程式設計客棧up/css-transition/ // in屬性為true/false,true為展開動效,falhttp://www.cppcns.comse為關閉動效 return createPortal( <csstransition in="{open}" timeout="{200}" unmountonexit=""> <div classname="modal"> <di程式設計客棧v classname="modal-content">{children}</div> <div classname="modal-close-btn" onclick="{onClose}"> x </div> </div> </csstransition>,); };
在使用 CSSTransition 元件後,Modal 的動效就方便多了。
4. 總結
至此已把待動效的 React Modal 元件實現出來了。雖然 React 中沒有類似 Vue 官方定義的<transition>
標籤,不過我們可以自己或者藉助第三方元件來實現。
以上就是React實現動效彈窗元件的詳細內容,更多關於React彈窗元件的資料請關注我們其它相關文章!