做了一个 popup 组件, 支持返回键和各种过度动画的定义

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2333 天前的主题，其中的信息可能已经有所发展或是发生改变。

组件地址: https://github.com/deepkolos/vc-popup

效果预览

特点

支持返回键, 可以按浏览器返回按钮关闭 popup

可以写出小复杂的过度动画, 比如磁贴按压效果[在 popUpMenu 可看到~]

支持 css 动画库, 比如 animation.css, 使用的时候自行添加依赖就好了

提供了几个比较好的 popup 组件, calendar, picker, imgViewer

行为定义相对标准, 这一点比较重要的, 前端行为定义犹如算法的输入定义一样, 比如触发关闭之后, 结束动画未结束之前, popup 会拦截输入事件, popup 属于不可交互状态

拓展比较方便~, 之后会补充 popup 编写的教程~

差点忘说了, 强大的定位支持, 有居中, clickRelative, domRelative, 其中domRelative 支持 25 个位置

Layer都经过优化了, 层次合理~, 没有出现压缩层, 或者层爆栈的情况~

采用的是绝对的置顶策略, 就是即便在页面内设置fixed+z-index:99999999999;, 都不会遮盖弹出的popup~

组件地址: https://github.com/deepkolos/vc-popup

6 条回复 • 2017-11-27 21:02:32 +08:00

iyour

2017-11-27 16:27:26 +08:00

感觉很不错，已 star

Geo200

2017-11-27 16:54:19 +08:00

不错，弹出层解决了移动端滚动穿越的问题，改天研究下实现原理

Geo200

2017-11-27 17:00:19 +08:00

再看了下是利用路由切换的原理来解决滚动穿越问题，挺新颖，已 star ！

huangsw

2017-11-27 17:15:43 +08:00

很赞

deepkolos

2017-11-27 17:34:29 +08:00

@Geo200 不是, 路由切换是来支持返回键的, 滚动穿越是通过阻止事件冒泡实现的, 主要是 touchmove 实现, 我看到别组件库通过设置 overflow: hidden; 来禁止滚动, 这个做法在移动端有渲染性能, 因为会导致大面积的重排和重绘, 这是我之前的测试结果 https://www.v2ex.com/t/382323

deepkolos

2017-11-27 21:02:32 +08:00

想知道更多关于前端的行为定义~