实现一个带有动效的 React 弹窗组件

蚊子前端博客
发布于 2021-06-21 13:18
实现一个带有动效的 React 弹窗组件

我们在写一些 UI 组件时,若不考虑动效,就很容易实现,主要就是有无的切换(类似于 Vue 中的 v-if 属性)或者可见性的切换(类似于 Vue 中的 v-show 属性)。

沉迷工作-蚊子的前端博客

1. 没有动效的弹窗

在 React 中,可以这样来实现:

COPYJAVASCRIPT

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); };

使用方式:

COPYJAVASCRIPT

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-activeexit-active的过程中。

我们再通过一个变量 active 来控制是关闭动效是否已执行关闭,参数 open 只控制是执行展开动效还是关闭动效。

当 open 和 active 都为 false 时,才销毁弹窗。

COPYJAVASCRIPT

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, ); };

这里我们接着添加动效过程的变化:

COPYJAVASCRIPT

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 组件完整的代码如下:

COPYJAVASCRIPT

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, ); };

动效的流转过程已经实现了,样式也要一起写上。比如我们要实现渐隐渐现的 fade 效果:

COPYCSS

.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 就行。

一个带有动效的弹窗就已经实现了。

使用方式:

COPYJAVASCRIPT

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,表示在动效结束后,卸载该组件。

COPYJAVASCRIPT

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 的动效就方便多了。

modal的动效-蚊子的前端博客

4. 总结

帮我点个在看吧-蚊子的前端博客

至此已把待动效的 React Modal 组件实现出来了。虽然 React 中没有类似 Vue 官方定义的<transition>标签,不过我们可以自己或者借助第三方组件来实现。

标签:
阅读(489)

公众号:

qrcode

微信公众号:前端小茶馆