底部弹出框动画

qq微信小程序学习交流群：581478349

  <!-- 点击滑动蒙版图层 -->
        <cover-view data-time="{{lastTapTime}}" class="ball{{ball_height}}" id="id" bindtap="{{multipleTap}}" bindtouchstart='touchstart' bindtouchend='{{touchend}}'>
          <cover-image src='/img/comment.png' class='comment_img ' catchtap='showModal' data-vid="{{item.vid}}" data-img_url='{{item.wapimg}}'></cover-image>
        </cover-view>
<!-- 隐藏评论窗口按钮 -->
    <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
<view class='down' bindtap='hideModal'></view>
      <!-- 评论遍历 -->
      <view class="commentTitle">aaaaaaaaaaaaaaa </view>
  </view>


/* 隐藏按钮*/
.down {
   content: "";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width:  0 2px 2px 0 ;
  border-color: #636363;
  border-style: solid;
  margin-left: 10rpx;
  transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
  -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
  position: absolute;
  right: 30rpx;
  top: 20rpx;
}
//蒙版层
.ball2 {
  background-color: rgba(0, 0, 0, 0.103);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ball1 {
  background-color: rgba(0, 0, 0, 0.103);
  width: 100%;
  height: 45vh;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*对话框 */
.commodity_attr_box {
  height: 50%;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-bottom: 60rpx;
}

page({
data:{
 showModalStatus: false,
}

 //弹出框
  showModal: function() {
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: true,
      heighTrue: false,
      video_heighe: 45,
      ball_height: 1,
    })
    setTimeout(function() {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
  },
//隐藏对话框
  hideModal: function() {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function() {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false,
        heighTrue: true,
        video_heighe: 100,
        ball_height: 2,
      })
    }.bind(this), 200)
  },
})

承接web前端开发：

猜你喜欢