移动端重构系列12——popup

转载自http://www.w3cplus.com/mobile/mobile-terminal-refactoring-popup.html

popup分为两种:一种是内容比较多,直接以全屏显示,如图一;一种是少量内容的popup提示,如图二

先上demo:

popup测试

popup page

第一种形式,设计结构如下:

<header class="header"></header>
<div class="wrap-page">
    <section class="page"></section>
    ...
</div>
<footer class="footer"></footer>
<section class="popup-page">
    <div class="popup-hd"><span class="btn-close"></span></div>
    <div class="popup-bd"></div>
</section>

因为这种形式内容可能会比较长,有可能会有滚动效果,所以头部(含有关闭按钮)采用固定,动画设计使用translate偏移和opacity来搞定,这里用的是从下面进入视觉范围。通过添加删除active这个class来控制元素显示隐藏,

scss代码如下:

.popup-page{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background-color: #fff;
    padding-top: 35px;
    z-index: $zIndexOverlay + 5;
    @include translate3d(0, 100%, 0);
    @extend %transition-transform;

    &.active{
        opacity: 1;
        @include translate3d(0, 0, 0);
    }
    .popup-hd{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 35px;
        line-height: 35px;
        border-bottom: 1px solid $primary;
        padding-left: 10px;
        .btn-close{
            position: absolute;
            right: 0;
            top: 0;
            font-size: 30px;
            width: 35px;
            text-align: center;
            cursor: pointer;
            &:active,&:hover{
                background-color: $primary;
                color: #fff;
            }
        }
    }
    .popup-bd{
        padding: 10px;
        height: 100%;
        @extend %scroll-touch;
        p{
            margin-bottom: 10px;
        }
    }
}

popup over

设计结构如下:

<header class="header"></header>
<div class="wrap-page">
    <section class="page"></section>
    ...
</div>
<footer class="footer"></footer>
<div class="overlay"><section class="popup-over"></section></div>

这种的首先得计算定位,这次动画采用scale和opacity来搞定,同样通过添加删除active这个class来控制元素显示隐藏

.popup-over{
    background-color: #fff;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    padding: 10px;
    z-index: $zIndexOverlay + 5;
    opacity: 0;
    @include transform(translate3d(0, 0, 0) scale(0.815));
    @extend %transition-transform;

    &.active {
      opacity: 1;
      @include transform(translate3d(0, 0, 0) scale(1));
    }
    &::before{
        @include triangle(top, 10px, #fff);
        position: absolute;
        left: 50%;
        top: -10px;
        margin-left: -10px;
    }
}

总结

使用transition动画的时候,在动画开始之前先得确保display为非none状态,然后动画结束之后有个transtionend事件可以调用,demo中的overlay的隐藏就是这个调用了这个事件

时间: 2024-10-20 08:27:21

移动端重构系列12——popup的相关文章

移动端重构系列6——图标

移动端重构系列-mobile 本系列文章,如果没有特别说明,兼容安卓4.0.4+ 这里我们把图标分为三种:背景图片,直接绘制,@font-face.如无特殊情况,图标的标签采用i标签 背景图片 首先我们会选择sprite形式,把所有的图标都放在一个大图中,然后考虑到retina屏,所以我们的图标应该设计为实际大小的2倍,然后设置background-size为实际大小.以下面的msg icon为例: 图中的每个icon大小为24px,实际应用时,我们是以12px来使用的: %icon-msg{

移动端重构系列1——新建空白页面

移动端重构系列-mobile 本系列文章,如果没有特别说明,兼容安卓4.0.4+,测试demo html5文档申明 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> meta标签 <meta nam

移动端重构系列3——重置样式

移动端重构系列-mobile 本系列文章,如果没有特别说明,兼容安卓4.0.4+,测试demo 基于Normalize.css,根据目前我们大家的使用习惯进行了一些清零及移动端的特点添加一些基础样式. html { font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-si

移动端重构系列5——切入切出动画

移动端重构系列-mobile 本系列文章,如果没有特别说明,兼容安卓4.0.4+ 因为后面的几篇文章都需要用到切入切出动画什么的,所以先把这个说下.为了简单起见,我们这里只讨论translate偏移动画(translate比起绝对定位的top/left/right/bottom要高效),而如其他的旋转缩放淡入淡出什么的道理都一样. transition动画 先定义要运动的元素在视觉范围之外,以左方向进入为例,同时定义transition: .demo{ @include translate3D(

移动端重构系列11——弹窗modal

copy from http://www.w3cplus.com/mobile/mobile-terminal-refactoring-modal.html 本系列文章,如果没有特别说明,兼容安卓4.0.4+ 设计结构如下: <header class="header"></header> <div class="wrap-page"> <section class="page"></sect

小酌重构系列[12]&mdash;&mdash;去除上帝类

关于上帝类 神说:"要有光",就有了光.--<圣经>.上帝要是会写程序,他写的类一定是"上帝类".程序员不是上帝,不要妄想成为上帝,但程序员可以写出"上帝类".上帝是唯一的,上帝的光芒照耀人间,上帝是很爱面子的,他知道程序员写了"上帝类",抢了他的风头,于是他降下神罚要惩戒程序员.--既然你写了"上帝类",那么就将你流放到艰难地修改和痛苦的维护的炼狱中,在地狱之火中永久地熬炼. 你看,上帝也是有

移动端重构系列-移动端html页面优化

对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面来看看来自ISUX的米随随讲讲移动手机平台的HTML5前端优化,或许对你有帮助和启发. 概述 1. PC优化手段在Mobile侧同样适用      2. 在Mobile侧我们提出三秒种渲染完成首屏指标      3. 基于第二点,首屏加载3秒完成或使用Loading      4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB      5. Mobile侧因手机配置

金融系列12《双币电子现金方案》

在PBOC 2.0规范中,电子现金只能设置一个币种,并对应着一整套的交易参数和风险管理参数.双币种电子现金是根据现有的电子现金交易流程和安全机制,在卡片中增 加第二币种及相关参数.交易时根据终端的交易货币代码,选择对应的一整套数据进行操作.因此,对于终端来说,交易流程上无特殊处理要求. 受清算通道和监管政策的影响,目前只允许境外机构发行双币种电子现金卡,且要求第一币种为当地币种,第二币种为人民币.考虑到现有的双币电子现金方案和终 端加载汇率方案已经可以满足境内外电子现金产品跨境支付的所有需求,发

【Java重构系列】重构31式之封装集合

2009年,Sean Chambers在其博客中发表了31 Days of Refactoring: Useful refactoring techniques you have to know系列文章,每天发布一篇,介绍一种重构手段,连续发文31篇,故得名“重构三十一天:你应该掌握的重构手段”.此外,Sean Chambers还将这31篇文章[即31种重构手段]整理成一本电子书, 以下是博客原文链接和电子书下载地址: 博客原文:http://lostechies.com/seanchamber