实现一个带有动效的 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(() => {
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(
<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 效果:
.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 (
<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-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 的动效就方便多了。
4. 总结
至此已把待动效的 React Modal 组件实现出来了。虽然 React 中没有类似 Vue 官方定义的<transition>
标签,不过我们可以自己或者借助第三方组件来实现。
欢迎关注我的公众号:“前端小茶馆”,
实现一个带有动效的 React 弹窗组件的更多相关文章
- React弹窗组件
原文地址 小寒的博客 这里的弹窗泛指所有的弹出组件,这些组件不受页面其他UI布局影响,处于DOM结构的顶层,绝对定位在body元素下. 这个特殊性也给它的开发提出了特殊的要求. react新版本中的c ...
- Google I/O 官方应用中的动效设计
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jILRvRTrc/article/details/82881743 作者:Nick Butcher, ...
- angular2-4 之动效-animation
提示: angular2 时animation代码在核心模块里面(@angular/core里面);到了angular4.0时animation从核心模块中提取出来作为一个单独的模块, 这样可以在 ...
- Principle如何制作动效设计?简单易学的Principle动效设计教程
Principle for Mac是一款新开发的交互设计软件.相比 Pixate 更容易上手,界面类似 Sketch 等做图软件,思路有点像用 Keynote 做动画,更「可视化」一些. 如果您还没有 ...
- react 拆分组件于组件
Todolist.js(这是父组件) import React, { Component,Fragment } from 'react'; import './style.css'; import T ...
- iOS转场弹窗、网易云音乐动效、圆环取色器、Loading效果等源码
iOS精选源码 view controller transition and popover (控制器转场和弹窗) UITableView头部悬停+UITableView侧滑嵌套 一行代码集成时间选择 ...
- 一个绚丽的loading动效分析与实现!
最终效果如下 从效果上看,我们需要考虑以下几个问题: 1.叶子的随机产生: 2.叶子随着一条正余弦曲线移动: 3.叶子在移动的时候旋转,旋转方向随机,正时针或逆时针: 4.叶子遇到进度条,似乎是融合进 ...
- Android 一个绚丽的loading动效分析与实现!
http://blog.csdn.net/tianjian4592/article/details/44538605 前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的loa ...
- iOS开发之 Lottie -- 炫酷的动效
动效在软件开发中非常常见,炫酷的动画能提升应用的B格,然而由设计师的设计转化成程序猿GG的代码是个非常"痛苦"的过程.对于复杂动画,可能要花费很多时间去研究和实现.Lottie 的 ...
随机推荐
- 多线程-2.线程创建方式和Thread类
线程的创建方式 1.继承Thread类,重写run方法,示例如下: 1 class PrimeThread extends Thread { 2 long minPrime; 3 PrimeThrea ...
- restful 与 webapi 详解
restful 什么是API API全称Aplication Programming Itererface即应用程序编程接口, 我们在开发应用程序时经常用到.API作为接口,用来"连接&qu ...
- .NET Core 对象( Transient、Scope、Singleton )生命周期详解 (对象创建以及释放)
首先我们在VS2019中创建一个.NET Core的控制台程序,方便演示: 需要安装两个依赖包 Microsoft.Extensions.DependencyInjection 依赖注入对象的具体实现 ...
- MSSQL·查看DB中所有表及列的相关信息
阅文时长 | 0.6分钟 字数统计 | 1013.6字符 主要内容 | 1.引言&背景 2.声明与参考资料 『MSSQL·查看DB中所有表及列的相关信息』 编写人 | SCscHero 编写时 ...
- Sentinel导航
简介 最近都在弄微服务的东西,现在来记录下收获.我从一知半解到现在能从0搭建使用最大的感触有两点 1.微服务各大组件的版本很多,网上很多博客内容不一定适合你的版本,很多时候苦苦琢磨都是无用功 2.网上 ...
- 基于混合云模式的calico部署
开始前准备 确定calico数据存储 Calico同时支持kubernetes api和etcd数据存储.官方给出的建议是在本地部署中使用K8S API,仅支持Kubernetes模式.而官方给出的e ...
- 保姆级别的RabbitMQ教程!一看就懂!(有安装教程,送安装需要的依赖包,送Java、Golang两种客户端教学Case)
保姆级别的RabbitMQ教程!一看就懂!(有安装教程,送安装需要的依赖包,送Java.Golang两种客户端教学Case) 目录 什么是AMQP 和 JMS? 常见的MQ产品 安装RabbitM ...
- vim 编辑器高级用法
vim编辑器介绍 如果没有安装vim使用下面方式安装 yum -y install vim vi与vim的不同 两者最大的不同:vim可以高亮显示,vi不可以. vim三种工作模式 普通模式 # 光标 ...
- ifconfig显示的网卡信息和我的配置文件名不符
比如我的配置文件, cd /etc/sysconfig/network-scripts/ifcfg-Auto_eth0是这个名称,但是我使用ifconfig显示的信息却是 eth6 Link en ...
- element-ui 的el-select如何不显示value,显示value对应的label值
有时根据需要,我们根据v-model的值绑定option, 想要的效果: 实际的效果: 原因: value的格式存在问题,数据库读取到的数据不一定为number类型,需要手动转换. 第一种 <t ...