微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

先看效果图：

源码：

<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)}}
})