小程序自定义弹出框

https://blog.csdn.net/michael_ouyang/article/details/62430905

<!--button-->
<view class="btn" bindtap="powerDrawer" data-statu="open">button</view>

<!--mask-->
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">

  <!--drawer content-->
  <view class="drawer_title">弹窗标题</view>
  <view class="drawer_content">
    <view class="top grid">
      <label class="title col-0">标题</label>
      <input class="input_base input_h30 col-1" name="rName" value="可自行定义内容"></input>
    </view>
    <view class="top grid">
      <label class="title col-0">标题</label>
      <input class="input_base input_h30 col-1" name="mobile" value="110"></input>
    </view>
    <view class="top grid">
      <label class="title col-0">标题</label>
      <input class="input_base input_h30 col-1" name="phone" value="拒绝伸手党"></input>
    </view>
    <view class="top grid">
      <label class="title col-0">标题</label>
      <input class="input_base input_h30 col-1" name="Email" value="仅供学习使用"></input>
    </view>
    <view class="top bottom grid">
      <label class="title col-0">备注</label>
      <input class="input_base input_h30 col-1" name="bz"></input>
    </view>
  </view>
  <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view>
</view>

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
        }
      );
    }
https://blog.csdn.net/u012421719/article/details/70889542　微信小程序特殊效果合集