微信小程序--类似弹出菜单特效，从右向左滑出

想要实现的效果：点击圆形图标，view从右向左滑出，再次点击从左向右滑入

wxml:

 


校区


{{item}}




{{item}}


舞种


{{item}}


年龄


{{item}}


课程


{{item}}


难度


{{item}}


价格


{{item}}




设为默认选


确定
取消

js:

data: {
   move_o:0,
   s_move:true
},
show_move:function(){
let s_move=this.data.s_move;
this.setData({
     s_move:!s_move,
     move_o:1
})

wxss:

.move_t{
 z-index: 22; 
 animation: mymove 1s 1;
 animation-fill-mode:forwards; 
}
.z_move{
 z-index: 23!important;
}
@keyframes mymove{
from {right:-750px;}
 to {right:0px;}
}
.move_tf{
 z-index: 22;
 animation: mymove2 1s 1;
 animation-fill-mode:forwards; 
}
@keyframes mymove2{
from {right:0px;}
 to {right:-750px;}
}

原文作者： Hakuna__Matata
原文链接： 微信小程序 类似弹出菜单特效，从右向左滑出
声明：本文来源于网络，版权归作者所有，不代表本专栏观点，有什么问题请联系我，谢谢！