微信小程序 侧滑效果实现

先看效果图：

源码：

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

  }
})