最近在自己做一个晓得websocket项目，首页需要一个登录的页面，这个登录页面是一个弹框。以前使用弹框总是用现成的组件，比如antd的ui库里边的Modal， 这种使用起来也非常的方便，但是，今天想自己实现一个弹框组件。
难点
要写一个弹框，有以下难点
- 蒙层， 弹框显示的时候需要将后面的dom元素隐藏。
- 弹框内容dom化， 作为一个组件，灵活是必须的，首先需要将内容可定制
- 动画， 弹框的入场和离场等动效。
- 组件间的通信以及解耦， 确认和取消的回调，以及在dom分层上实现与父组件隔离
1.动画
我觉得动画是最难的，首先react组件不像之前对于Jquery式的过程式开发，如果是jquery，通过id拿到dom节点实例，之后通过修改这个节点的style和class，就能达到效果。同样的，react也可以这样开发，通过refs去拿实例节点。通过修改class去达到实现动画的目的，这两种开发方式是都可行的。
但是，react是状态态是开发，听前辈们说，这种开发框架的本意是通过修改state的状态来达到控制页面的dom元素。如果使用refs去拿实例节点去显式的去修改，那还不如用jquery方便好写。
那么我们可以将classname作为一个state，使用定时器，延时控制classname的改变。
2. 动画的使用
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
transform
CSS transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
这里常用的几个属性就是： scale， rotate， translate， 分别对应缩放， 旋转和平移，后缀加上x或者y就是朝它们的x或者y轴做操作，
rotateX(10deg);
translate3D(12deg, 13deg, 14deg)
scaleY(10deg)
后缀3D和2D分别作3D和2D动画，但是要注意：
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
transition
Transitions可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，它是一个简写的属性，用于设置四个过渡属性：transition-property（过渡的类型）、transition-duration（过渡的持续时间）、transition-timing-function（过渡速度效果的速度曲线）、transition-delay（规定过渡从何时开始），一般设置只设置前两个属性， 后面两个很少用，涉及到极为高深的数学。示例：
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
网友评论