微信小程序之自定义底部弹出框动画

浅浅的花香味﹌ 2023-06-17 13:56 32阅读 0赞

1 wxml

2 wxss

.modals{ 
      position:fixed; 
      z-index: 999; 
      top:0; 
      left: 0;
      right:0;
      bottom: 0;
    }
    .modals-cancel{ 
      position:absolute;
      z-index:1000;
      top:0;
      left: 0;
      right:0;
      bottom: 0;
      background-color: rgba(0,0,0,.5);
      }
    .bottom-dialog-body{ 
      position:absolute; 
      z-index:10001; 
      bottom:0; 
      left:0; 
      right:0; 
      padding:30rpx; 
      height:300rpx; 
      background-color: #fff;
    }
    /*动画前初始位置*/
    .bottom-pos{ 
      -webkit-transform:translateY(100%);
      transform:translateY(100%);
    }

3 js

Page({ 
        data:{ 
          hideModal:true, //模态框的状态 true-隐藏 false-显示
          animationData:{ },//
        },
    
      // 显示遮罩层
        showModal: function () { 
        var that=this;
        that.setData({ 
          hideModal:false
        })
        var animation = wx.createAnimation({ 
          duration: 600,//动画的持续时间 默认400ms 数值越大，动画越慢 数值越小，动画越快
          timingFunction: 'ease',//动画的效果 默认值是linear
        })
        this.animation = animation 
        setTimeout(function(){ 
          that.fadeIn();//调用显示动画
        },200)   
      },
    
      // 隐藏遮罩层
      hideModal: function () { 
        var that=this; 
        var animation = wx.createAnimation({ 
          duration: 800,//动画的持续时间 默认400ms 数值越大，动画越慢 数值越小，动画越快
          timingFunction: 'ease',//动画的效果 默认值是linear
        })
        this.animation = animation
        that.fadeDown();//调用隐藏动画 
        setTimeout(function(){ 
          that.setData({ 
            hideModal:true
          })      
        },720)//先执行下滑动画，再隐藏模块
        
      },
    
      //动画集
      fadeIn:function(){ 
        this.animation.translateY(0).step()
        this.setData({ 
          animationData: this.animation.export()//动画实例的export方法导出动画数据传递给组件的animation属性
        })    
      },
      fadeDown:function(){ 
        this.animation.translateY(300).step()  //移动的距离
        this.setData({ 
          animationData: this.animation.export(),  
        })
      }, 
    })