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

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

代码片段链接：:///

页面结构：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);}
})

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

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