V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
deepkolos
V2EX  ›  程序员

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

  •  
  •   deepkolos ·
    deepkolos · 2017-11-27 14:57:49 +08:00 · 1791 次点击
    这是一个创建于 2554 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    效果预览

    特点

    1. 支持返回键, 可以按浏览器返回按钮关闭 popup
    2. 可以写出小复杂的过度动画, 比如磁贴按压效果[在 popUpMenu 可看到~]
    3. 支持 css 动画库, 比如 animation.css, 使用的时候自行添加依赖就好了
    4. 提供了几个比较好的 popup 组件, calendar, picker, imgViewer
    5. 行为定义相对标准, 这一点比较重要的, 前端行为定义犹如算法的输入定义一样, 比如触发关闭之后, 结束动画未结束之前, popup 会拦截输入事件, popup 属于不可交互状态
    6. 拓展比较方便~, 之后会补充 popup 编写的教程~
    7. 差点忘说了, 强大的定位支持, 有居中, clickRelative, domRelative, 其中domRelative 支持 25 个位置
    8. Layer都经过优化了, 层次合理~, 没有出现压缩层, 或者层爆栈的情况~
    9. 采用的是绝对的置顶策略, 就是即便在页面内设置fixed+z-index:99999999999;, 都不会遮盖弹出的popup~

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

    6 条回复    2017-11-27 21:02:32 +08:00
    iyour
        1
    iyour  
       2017-11-27 16:27:26 +08:00
    感觉很不错,已 star
    Geo200
        2
    Geo200  
       2017-11-27 16:54:19 +08:00
    不错,弹出层解决了移动端滚动穿越的问题,改天研究下实现原理
    Geo200
        3
    Geo200  
       2017-11-27 17:00:19 +08:00
    再看了下是利用路由切换的原理来解决滚动穿越问题,挺新颖,已 star !
    huangsw
        4
    huangsw  
       2017-11-27 17:15:43 +08:00
    很赞
    deepkolos
        5
    deepkolos  
    OP
       2017-11-27 17:34:29 +08:00
    @Geo200 不是, 路由切换是来支持返回键的, 滚动穿越是通过阻止事件冒泡实现的, 主要是 touchmove 实现, 我看到别组件库通过设置 overflow: hidden; 来禁止滚动, 这个做法在移动端有渲染性能, 因为会导致大面积的重排和重绘, 这是我之前的测试结果 https://www.v2ex.com/t/382323
    deepkolos
        6
    deepkolos  
    OP
       2017-11-27 21:02:32 +08:00
    想知道更多关于前端的行为定义~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2695 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:39 · PVG 18:39 · LAX 02:39 · JFK 05:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.