底部弹出框动画

傷城~ 2021-09-18 13:14 470阅读 0赞

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

![20190319101910350.png][]

<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前端开发：

v:![20190220203507663.png][]![20190220203509928.png][]

[20190319101910350.png]: /images/20210724/5c2dc608351547c99d880751c379f795.png
[20190220203507663.png]: https://img-blog.csdnimg.cn/20190220203507663.png
[20190220203509928.png]: /images/20210724/d2c77db535d84cc0afc3613eac914bc9.png