微信小程序 界面从右边滑出_微信小程序--类似弹出菜单特效,从右向左滑出

想要实现的效果:点击圆形图标,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

声明:本文来源于网络,版权归作者所有,不代表本专栏观点,有什么问题请联系我,谢谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值