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

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

页面结构：index.wxml

view class='shade' hidden='{{popup}}' bindtap='hidePopup'/viewview class='shade_box popup' hidden='{{popup}}'    view class='title'text弹窗：/text/view    view class='content'我是一个有动画的特效的窗口/view    view class='copy'© 2018 helang.love@qq.com/view    view class='msg' bindtap='hidePopup'点击遮罩层关闭弹窗/view/viewview  style='margin:20rpx 50rpx;'    button type='primary' bindtap='showPopup'打开弹窗/button/view

展示样式：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);  }})

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