小程序自定义弹窗（有显示动画的）

小程序类似与Vue.js，Angular.js这样的模板引擎，这类MVVM的数据驱动框架能快速的开发项目，但是在做小程序时必会遇到的一个问题就是弹窗非常生硬，没有过渡动画。下面的源码未例一个有动画的小程序弹窗

代码片段链接：wechatide://minicode/OGY2jlmH7f3z

页面结构：index.wxml

    打开弹窗

展示样式：index.wxss

/* 遮罩 */
.shade {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 10;
}
.shade_box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 11;
    min-width: 200rpx;
    min-height: 200rpx;
    font-size: 28rpx;
    box-sizing: border-box;
    color: #333;
    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0;
    word-wrap: break-word;

    animation-name:popup;
    animation-duration:0.2s;
    animation-timing-function:linear;
    animation-delay:0;
    animation-iteration-count:1;
    animation-direction:normal;
}

@keyframes popup
{
    from{opacity:0;transform:scale(0.3,0.3);}
    to 	{opacity:1;transform:scale(1,1);}
}


/* 当前弹窗样式 */
.popup{
    width: 600rpx;
    height: 600rpx;
    background-color: #ffffff;
}
.popup .title{
    padding: 0 20rpx;
    border-bottom: #e5e5e5 solid 1px;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 32rpx;
    background-color: #f6f6f6;
}
.popup .content{
    margin: 100rpx;
    font-size: 40rpx;
    text-align: center;
    color: #0099ff;
}
.popup .copy{
    color: #999999;
    text-align: center;
}
.popup .msg{
    color: #ff0000;
    text-align: center;
    margin-top: 30rpx;
}

交互逻辑：index.js

Page({
  data: {
    popup: true
  },
  /* 隐藏弹窗 */
  hidePopup(flag = true) {
    this.setData({
        "popup": flag
    });
  },
  /* 显示弹窗 */
  showPopup() {
    this.hidePopup(false);
  }
})

最后礼貌性的给出效果图：

当然啦，本示例只是简单的展示一下有动画弹窗的小程序如何做，更加精美的弹窗效果，只能由你自己去设计啦。

作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号