React实现动效弹窗组件 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}x, document.body); };

使用方式：

const App = () => {const [open, setOpen] = useState(false); return ( setOpen(false)}>modal content); };

我们在这里就是使用open属性来控制展示还是不展示，但完全没有渐变的效果。
若我们想实现 fade, zoom 等动画效果，还需要对此进行改造。

文章图片

2. 自己动手实现有动效的弹窗
【React实现动效弹窗组件】很多同学在自己实现动效时，经常是展示的时候有动效，关闭的时候没有动效。都是动效的时机没有控制好。这里我们先自己来实现一下动效的流转。
刚开始我实现的时候，动效只有开始状态和结束状态，需要很多的变量和逻辑来控制这个动效。
后来我参考了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}x,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(''); // 动效的classconst 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}x,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查看效果。
类似地，还有 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}x,document.body,); };

在使用 CSSTransition 组件后，Modal 的动效就方便多了。