使用微信小程序开发一个弹窗页面的方法介绍

<view>    <view>CopyRight：All Right Reserved</view>    <view>原创作者：51小程序</view>    <view>微信小程序开发者社区</view>    <view>HTML51.COM</view>    <view><image></image></view>    <view><button>点击进入弹窗演示页面</button></view></view>

<!--使用animation属性指定需要执行的动画-->  <view>      <!--drawer content-->    <view>弹窗标题</view>   <view>     <view>       <label>标题</label>       <input>     </view>     <view>       <label>标题</label>       <input>     </view>     <view>       <label>标题</label>       <input>     </view>     <view>       <label>标题</label>       <input>     </view>     <view>       <label>备注</label>       <input>     </view>   </view>   <view>确定</view> </view>

.btn {   width: 80%;    padding: 20rpx 0;    border-radius: 10rpx;    text-align: center;    margin: 40rpx 10%;    background: #000;    color: #fff;  }    /*mask*/ .drawer_screen {   width: 100%;    height: 100%;    position: fixed;    top: 0;    left: 0;    z-index: 1000;    background: #000;    opacity: 0.5;    overflow: hidden;  }    /*content*/ .drawer_box {   width: 650rpx;    overflow: hidden;    position: fixed;    top: 50%;    left: 0;    z-index: 1001;    background: #FAFAFA;    margin: -150px 50rpx 0 50rpx;    border-radius: 3px;  }    .drawer_title{   padding:15px;    font: 20px "microsoft yahei";    text-align: center;  } .drawer_content {   height: 210px;    overflow-y: scroll; /*超出父盒子高度可滚动*/ }    .btn_ok{   padding: 10px;    font: 20px "microsoft yahei";    text-align: center;    border-top: 1px solid #E8E8EA;    color: #3CC51F;  }    .top{     padding-top:8px;  } .bottom {     padding-bottom:8px;  } .title {     height: 30px;      line-height: 30px;      width: 160rpx;      text-align: center;      display: inline-block;      font: 300 28rpx/30px "microsoft yahei";  }    .input_base {     border: 2rpx solid #ccc;      padding-left: 10rpx;      margin-right: 50rpx;  } .input_h30{     height: 30px;      line-height: 30px;  } .input_h60{     height: 60px;  } .input_view{     font: 12px "microsoft yahei";      background: #fff;      color:#000;      line-height: 30px;  }    input {     font: 12px "microsoft yahei";      background: #fff;      color:#000 ;  } radio{     margin-right: 20px;  } .grid { display: -webkit-box; display: box; } .col-0 {-webkit-box-flex:0;box-flex:0;} .col-1 {-webkit-box-flex:1;box-flex:1;} .fl { float: left;} .fr { float: right;}

Page({   data: {     showModalStatus: false   },   powerDrawer: function (e) {     var currentStatu = e.currentTarget.dataset.statu;      this.util(currentStatu)   },   util: function(currentStatu){     /* 动画部分 */     // 第1步：创建动画实例       var animation = wx.createAnimation({       duration: 200,  //动画时长        timingFunction: "linear", //线性        delay: 0  //0则不延迟      });             // 第2步：这个动画实例赋给当前的动画实例      this.animation = animation;         // 第3步：执行第一组动画      animation.opacity(0).rotateX(-100).step();         // 第4步：导出动画对象赋给数据对象储存      this.setData({       animationData: animation.export()     })            // 第5步：设置定时器到指定时候后，执行第二组动画      setTimeout(function () {       // 执行第二组动画        animation.opacity(1).rotateX(0).step();        // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象        this.setData({         animationData: animation        })                //关闭        if (currentStatu == "close") {         this.setData(           {             showModalStatus: false           }         );        }     }.bind(this), 200)          // 显示      if (currentStatu == "open") {       this.setData(         {           showModalStatus: true         }       );      }   }    })