微信小程序底部往上弹出层 动画

wxml：

wxml：
#点击显示






  
    这里为内容
  


wxcss：
/* 遮罩 */
.shadow{
  width: 100%;
  height: 100%;
  z-index: 80;
  position: absolute;
  top: 0;
  background-color: #000;
  opacity: 0.5;
}
/* 上滑高度 */
.choosen{
  width: 100%;
  height: 80%; 
  position: fixed;
  bottom: 0;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  z-index: 98;
}
/* 内容 */
.container-box {
  display: flex;
  height: 100%;
  flex-direction: column;
  width: 100%;
  border-radius: 15rpx;
  margin: 0 auto;
  z-index: 98;
}

/* 遮罩结束 */

wxjs：
// 显示遮罩层
  showshadow:function(e){
      if (this.data.chooseSize == false) {
        this.chooseSezi()
      } else {
        this.hideModal()
      }
  },

// 动画函数
  chooseSezi: function (e) {
    // 用that取代this，防止不必要的情况发生
    var that = this;
    // 创建一个动画实例
    var animation = wx.createAnimation({
      // 动画持续时间
      duration: 500,
      // 定义动画效果，当前是匀速
      timingFunction: 'linear'
    })
    // 将该变量赋值给当前动画
    that.animation = animation
    // 先在y轴偏移，然后用step()完成一个动画
    animation.translateY(1000).step()
    // 用setData改变当前动画
    that.setData({
      // 通过export()方法导出数据
      animationData: animation.export(),
      // 改变view里面的Wx：if
      chooseSize: true
    })
    // 设置setTimeout来改变y轴偏移量，实现有感觉的滑动 滑动时间
    setTimeout(function () {
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export(),
        clearcart: false
      })
    }, 100)
  },
  // 隐藏
  hideModal: function (e) {
    var that = this;
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'linear'
    })
    that.animation = animation
    animation.translateY(700).step()
    that.setData({
      animationData: animation.export()
    })
    setTimeout(function () {
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export(),
        chooseSize: false
      })
    }, 500)
  }