小程式底部劃入滑出效果

直接複製就能用

wxml

<view bindtap="showModal">點這裡</view>

<view class="wrap">
    <view class="modal modal-bottom-dialog" hidden="{{hideFlag}}">
        <view class="modal-cancel" bindtap="hideModal"></view>
        <view class="bottom-dialog-body bottom-positon" animation="{{animationData}}">
                  <!-- 滑塊兒區 -->
            <view class='huakuai'></view>
        </view>
    </view>
</view>

wxss

/*模態框*/
.modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;}
.modal-cancel{position:absolute; z-index:2000; top:0; right:0; bottom: 0; left:0; background:rgba(0,0,0,0.3);}
.bottom-dialog-body{width:100%; position:absolute; z-index:3000; bottom:0; left:0;background:#dfdede;}
/*動畫前初始位置*/
.bottom-positon{-webkit-transform:translateY(100%);transform:translateY(100%);}
/* 底部彈出框 */
.bottom-positon{
  text-align: center;
}
.huakuai{
     margin-bottom: 20rpx;
     height:574rpx;
     width:100%;
     padding-top:50rpx;
     background:#fff;
}

wx.js

data: {
            hideFlag: true,//true-隱藏  false-顯示
            // animationData: {},
      },


       // 顯示遮罩層  底部滑動
 showModal: function () {
      var that = this;
      that.setData({
        hideFlag: false
      })
      // 創建動畫實例
      var animation = wx.createAnimation({
        duration: 400,//動畫的持續時間
        timingFunction: 'ease',//動畫的效果 預設值是linear->勻速，ease->動畫以低速開始，然後加快，在結束前變慢
      })
      this.animation = animation; //將animation變數賦值給當前動畫
      var time1 = setTimeout(function () {
        that.slideIn();//調用動畫--滑入
        clearTimeout(time1);
        time1 = null;
      }, 100)
    },
   
    // 隱藏遮罩層
    hideModal: function () {
      var that = this;
      var animation = wx.createAnimation({
        duration: 400,//動畫的持續時間 預設400ms
        timingFunction: 'ease',//動畫的效果 預設值是linear
      })
      this.animation = animation
      that.slideDown();//調用動畫--滑出
      var time1 = setTimeout(function () {
        that.setData({
          hideFlag: true
        })
        clearTimeout(time1);
        time1 = null;
      }, 220)//先執行下滑動畫，再隱藏模塊
      
    },
    //動畫 -- 滑入
    slideIn: function () {
      this.animation.translateY(0).step() // 在y軸偏移，然後用step()完成一個動畫
      this.setData({
        //動畫實例的export方法導出動畫數據傳遞給組件的animation屬性
        animationData: this.animation.export()
      })
    },
    //動畫 -- 滑出
    slideDown: function () {
      this.animation.translateY(300).step()
      this.setData({
        animationData: this.animation.export(),
      })
    }