取消
wxss部分：
.top{
margin:0auto;
margin-top:50rpx;
background:#1da0ee;
color:#fff;
width:50vw;
text-align:center
}
.drawer_screen{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:1000;
background:#000;
opacity:0.5;
overflow:hidden;
}
/*content*/
.drawer_box{
width:600rpx;
height:300rpx;
overflow:hidden;
position:fixed;
top:50%;
left:50%;
z-index:1001;
background:#FAFAFA;
margin-top:-150rpx;
border-radius:3px;
margin-left:-300rpx;
}
.modalBox{
padding:60rpx;
font-size:30rpx;
}
.modalConf{
font-size:24rpx;
color:#999;
margin-top:20rpx;
}
.hidePick{
text-align:right;
margin-top:50rpx;
}
.hideModal{
color:#1da0ee;
margin-left:130rpx;
}
js部分：
Page({
data:{
},
//自定义弹框
powerDrawer:function(e){
console.log(e)//打印出当前对象
varcurrentStatu=e.currentTarget.dataset.statu;//获取statu属性值
varcurrentNum=e.currentTarget.dataset.num;//获取num属性值
currentNum=parseInt(currentNum,10)//注意，这一步是将字符串转换为数字
this.util(currentStatu,currentNum)//将参数引入util方法
},
util:function(currentStatu,currentNum){
/*动画部分*/
//第1步：创建动画实例
varanimation=wx.createAnimation({
duration:200,//动画时长
timingFunction:"linear",//线性
delay:0//0则不延迟
});
//第2步：这个动画实例赋给当前的动画实例
this.animation=animation;
console.log(currentNum)
//第3步：执行第一组动画
animation.opacity(0).translateY(currentNum).step();
//第4步：导出动画对象赋给数据对象储存
this.setData({
animationData:animation.export()
})
//第5步：设置定时器到指定时候后，执行第二组动画
setTimeout(function(){
//执行第二组动画
animation.opacity(1).translateY(0).step();
//给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
this.setData({
animationData:animation
})
//关闭
if(currentStatu=="close"){
this.setData(
{
showModalStatus:false
}
);
}
}.bind(this),200)
//显示
if(currentStatu=="open"){
this.setData(
{
showModalStatus:true
}
);
}
},
})
这只是很简单的一个弹框，类似的左右弹出只需要将translateY改为translateX就行了。但是这段代码有一个问题就是当你点击关闭的时候，currentNum是不存在的，同时关闭弹框时currentNum我们不可以赋值，所以需要利用小程序的缓存APi来完善这个动效。
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。