react的动画实现(React实现动效弹窗组件)
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(<li> <li classname="modal-content">{children}</li> <li classname="modal-close-btn" onclick="{onClose}">x</li> </li>, document.body); };
使用方式:
const App = () => { const [open, setOpen] = useState(false); return ( <li classname="app"> <button onclick="{()" ==""> setOpen(true)}>show modal</button> <modal open="{open}" onclose="{()" ==""> setOpen(false)}> modal content </modal> </li> ); };
我们在这里就是使用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( <li classname="modal"> <li classname="modal-content">{children}</li> <li classname="modal-close-btn" onclick="{onClose}"> x </li> </li>, 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( <li classname="{'modal" '="" +="" aniclassname}="" ontransitionend="{onTransitionEnd}"> <li classname="modal-content">{children}</li> <li classname="modal-close-btn" onclick="{onClose}"> x </li> </li>, 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 ( <li classname="app"> <button onclick="{()" ==""> setOpen(true)}>show modal</button> <modal open="{open}" onclose="{()" ==""> setOpen(false)}> modal content </modal> </li> ); };
点击链接自己实现动效的 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( <csstransition in="{open}" timeout="{200}" unmountonexit=""> <li classname="modal"> <li classname="modal-content">{children}</li> <li classname="modal-close-btn" onclick="{onClose}"> x </li> </li> </csstransition>, document.body, ); };
在使用 CSSTransition 组件后,Modal 的动效就方便多了。
4. 总结
至此已把待动效的 React Modal 组件实现出来了。虽然 React 中没有类似 Vue 官方定义的<transition>
标签,不过我们可以自己或者借助第三方组件来实现。
以上就是React实现动效弹窗组件的详细内容,更多关于React弹窗组件的资料请关注开心学习网其它相关文章!
- react 查看word文件(React实现导入导出Excel文件)
- react动态创建菜单并实现局部刷新(使用react-virtualized实现图片动态高度长列表的问题)
- react怎么添加动态html(react中的DOM操作实现)
- react教程简介(react入门级详细笔记)
- react native常用组件(react native环境安装流程)
- reacthooks基础使用(React 小技巧教你如何摆脱hooks依赖烦恼)
- react配置上下文路由(React中Portals与错误边界处理实现)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- react 分页列表优化(使用react-beautiful-dnd实现列表间拖拽踩坑)
- reactnative动态设置值(react native实现监控手势上下拉动效果)
- react组件封装成函数方法(React虚拟列表的实现)
- react 的事件机制(React如何优雅的捕获异常)
- 使用react生命周期的常见情况(react+ts实现简单jira项目的最佳实践记录)
- react动态添加组件属性(react使用antd的上传组件实现文件表单一起提交功能完整代码)
- react常见问题(React编程中需要注意的两个错误)
- react基础知识详解(如何深入理解React的ref 属性)
- 今天会下雨吗(今天会下雨吗小说)
- 追连续剧,品古今联4 明代三杨,联妙诗佳(追连续剧品古今联4)
- 三杨 共辅四朝帝王,构建明帝国内阁行政圈(三杨共辅四朝帝王)
- 红色文化进国企(红色文化进国企)
- 车友的选择| 轮毂该如何选(车友的选择轮毂该如何选)
- 秦海璐炫耀和王新军热恋蜜事,不料对方吐槽她吃饱后肚子撅老高(秦海璐炫耀和王新军热恋蜜事)
热门推荐
- python默认缩进设置(不归路系列:Python入门之旅-一定要注意缩进!!!推荐)
- react组件封装成函数方法(React虚拟列表的实现)
- opencv自带的人脸识别(Dlib+OpenCV深度学习人脸识别的方法示例)
- python人脸识别实时教程(python dlib人脸识别代码实例)
- docker打包镜像命令(docker 打包本地镜像,并到其他机器进行恢复操作)
- sqlserver追加主键(sqlserver主键自增的实现示例)
- docker的启动的绝对命令(在docker中开启sshd操作)
- css3中过渡动画的属性(css3 中实现炫酷的loading效果)
- mysql数据库三种模式(MySQL数据库是如何实现XA规范的)
- mysql8修改默认端口(MySQL 8.0新特性 — 管理端口的使用简介)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9