微信小程序上下左右滑动动画

1.HTML

<view class='main' bindtap="show">{{text}}</view>
<view class="top {{showFlag?'showTop':''}}">我是顶部</view>
<view class="bottom {{showFlag?'showBottom':''}}">我是底部</view>
<view class="right {{showFlag?'showRight':''}}">我是右部</view>
<view class="left {{showFlag?'showLeft':''}}">我是左部</view>

2.css

page {
  background-color: #009eff;
  text-align: center;
  color: #333;
  height: 100%;
}

.main {
  position: fixed;
  top: 300rpx;
  bottom: 300rpx;
  left: 30%;
  width: 40%;
  background-color: red;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top {
  position: fixed;
  top: 0;
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  background-color: #fff;
  transform: translate3d(0,-100%,0);
  transition: all 0.2s;
  z-index: 10;
}
.showTop{
  transform: translate3d(0,0,0);
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  background-color: #fff;
  transform: translate3d(0,100%,0);
  transition: all 0.2s;
  z-index: 10;
}
.showBottom{
  transform: translate3d(0,0,0);
}
.right{
  position: fixed;
  right: 0;
  top: 0;
  width: 30%;
  height: 100%;
  line-height: 300rpx;
  background-color: #fff;
  transform: translate3d(100%,0,0);
  transition: all 0.2s;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.showRight{
  transform: translate3d(0,0,0);
}
.left{
  position: fixed;
  left: 0;
  top: 0;
  width: 30%;
  height: 100%;
  line-height: 300rpx;
  background-color: #fff;
  transform: translate3d(-100%,0,0);
  transition: all 0.2s;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.showLeft{
  transform: translate3d(0,0,0);
}

3.js

data: {
    text:"显示",
    showFlag:false
  },
show:function(){
    this.setData({
      showFlag: this.data.showFlag?false:true,
      text: this.data.showFlag ? "显示" : "隐藏"
    });
  }

4.效果图