實現一個帶有動效的 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（

{children}

， document。body）；}；

使用方式：

const App = （） => { const ［open， setOpen］ = useState（false）； return （

setOpen（false）}> modal content

）；}；

我們在這裡就是使用

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（

{children}

， 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（（） => { 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（

{children}

， document。body，）；}；

動效的流轉過程已經實現了，樣式也要一起寫上。比如我們要實現漸隱漸現的 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；}

如果是要實現放大縮小的 zoom 效果，修改這幾個 class 就行。

一個帶有動效的彈窗就已經實現了。

使用方式：

const App = （） => { const ［open， setOpen］ = useState（false）； return （

setOpen（false）}> modal content

）；}；

自己實現動效的 React 彈窗 demo檢視效果。

彈窗的程式碼：

{children}

， document。body，）；}；

彈窗fade動效的樣式：

。fade-enter { opacity： 0；}。fade-enter-active { transition： opacity 200ms ease-in-out； opacity： 1；}。fade-enter-done { opacity： 1；}。fade-exit { opacity： 1；}。fade-exit-active { opacity： 0； transition： opacity 200ms ease-in-out；}。fade-exit-done { opacity： 0；}

彈窗zoom動效的樣式：

。zoom-enter { transform： scale（0。3）；}。zoom-enter-active { transition： transform 200ms ease-in-out； transform： scale（1）；}。zoom-enter-done { transform： scale（1）；}。zoom-exit { transform： scale（1）；}。zoom-exit-active { transform： scale（0）； transition： transform 200ms ease-in-out；}。zoom-exit-done { transform： scale（0）；}

類似地，還有 Toast 之類的，也可以這樣實現。

3。 react-transition-group

我們在實現動效的思路上借鑑了 react-transition-group 中的CSSTransition元件。

CSSTransition

已經幫我封裝好了動效展開和關閉的過程，我們在實現彈窗時，可以直接使用該元件。

這裡有一個重要的屬性：

unmountOnExit

，表示在動效結束後，解除安裝該元件。

const Modal = （{ open， onClose }） => { // http：//reactcommunity。org/react-transition-group/css-transition/ // in屬性為true/false，true為展開動效，false為關閉動效 return createPortal（

{children}

， document。body，）；}；

在使用 CSSTransition 元件後，Modal 的動效就方便多了。