如果对您有帮助，请关注我，欢迎加入微信小程序开发交流QQ群（173683866），有问题也可以加群问我获取问群里的大神！！！
先看效果图：
源码：
<view wx:if='{{if_show}}' class='{{show_centent?"show":"hide"}}' />
<button bindtap='btn'>展示 or 隐藏</button>page{
height: 100%
}
.show {
position: fixed;
width: 70%;
height: 100%;
animation: myfirst_show 2s;
background: chartreuse;
}
@keyframes myfirst_show
{
0% {left:-70%;}
100% {left: 0px;}
}
.hide{
position: fixed;
width: 70%;
height: 100%;
animation: myfirst_hide 2s;
background: chartreuse;
}
@keyframes myfirst_hide
{
0% {left:0;}
100% {left: -70%;}
}Page({
data: {
show_centent:false,
if_show:false
},
btn: function () {
var that =this;
if (!this.data.show_centent) {
this.setData({
if_show: true,
show_centent: true
})
} else {
that.setData({
show_centent: false
})
setTimeout(function () {
that.setData({
if_show: false
})
},2000)
}
}
})
