自己使用react写一个弹框组件(1)

最近在自己做一个晓得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 */
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,749评论 1 45
  • 十八岁,既是成年的时候,又是青春的黄金时段。在那样的日子,又会是怎样的一片天空? ...
    非儿_dd75阅读 282评论 0 1
  • 人,生来便是行者,永远在路上。 生命,永远是旅途,一直朝前走,直到终点。 人生,就...
    德米的海岛阅读 894评论 0 3
  • 女儿的中学可能要在寄宿制的学校进行了。学校考察时,我最关心的不是教学设计,升学率和丰富多彩的活动,而是“安...
    军师姐姐阅读 413评论 2 1
  • 心动的一瞬间 ——致海螺们的一封信 亲爱的小海螺和大海螺们,周末好! 这个星期,我们的周末作业中有一篇写作,主题是...
    石子雨阅读 324评论 0 0