想要实现的效果:点击圆形图标,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
声明:本文来源于网络,版权归作者所有,不代表本专栏观点,有什么问题请联系我,谢谢!