小程序抽屉导航栏带动画

效果：

js

Page({

  data: {
    showModalStatus: 0,
  },

  onLoad: function(options) {

  },

  onShow: function() {

  },

  //开启导航栏   关闭导航栏  
  setModalStatus: function(e) {
    console.log("设置显示状态，1显示0不显示", e.currentTarget.dataset.status);
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateX(200).step()
    this.setData({
      animationData: animation.export()
    })

    this.setData({
      showModalStatus: true
    });

    if (e.currentTarget.dataset.status == 1) {
      this.setData({
        showModalStatus: true
      });
    }
    setTimeout(function() {
      animation.translateX(0).step()
      this.setData({
        animationData: animation
      })
      if (e.currentTarget.dataset.status == 0) {
        this.setData({
          showModalStatus: false
        });
      }
    }.bind(this), 200)
  }

})

wxml

<view class='fix-cont' wx:if='{{!showModalStatus}}' bindtap="setModalStatus" data-status="1">
  <view class='icon-cheveron-left font-size-1'></view>
  <view class='icon-cheveron-left font-size-2'></view>
  <view class='font-size-3'>
    <view class='font-size-3-top'>快速</view>
    <view class='font-size-3-bottom'>导航</view>
  </view>
</view>

<view wx:if='{{showModalStatus}}'>
  <view class='mask-a' bindtap='setModalStatus' data-status="0"></view>
  <!-- <view> -->
    <view class='fix-cont-2' bindtap='setModalStatus' data-status="0" animation="{{animationData}}">
      <view class='icon-cheveron-right font-size-1'></view>
      <view class='icon-cheveron-right font-size-2'></view>
      <view class='font-size-4'>收起</view>
    </view>
    <view class='mask-a-body' animation="{{animationData}}">
      <view class='mask-a-body-top'>
        <view class='mask-a-body-top-left'>
          <view class='mask-a-body-top-left-ico'>
            <image src='../../../imgs/iconfont-home.png'></image>
          </view>
          <view class='mask-a-body-top-left-text'>首页</view>
        </view>
        <view class='mask-a-body-top-right'>
          <view class='mask-a-body-top-left-ico'>
            <image src='../../../imgs/iconfont-classify.png'></image>
          </view>
          <view class='mask-a-body-top-left-text'>分类</view>
        </view>
      </view>
      <view class='mask-a-body-bottom'>
        <view class='mask-a-body-top-left-b'>
          <view class='mask-a-body-top-left-ico'>
            <image src='../../../imgs/iconfont-cart.png'></image>
          </view>
          <view class='mask-a-body-top-left-text'>购物车</view>
        </view>
        <view class='mask-a-body-top-right-b'>
          <view class='mask-a-body-top-left-ico'>
            <image src='../../../imgs/iconfont-user.png'></image>
          </view>
          <view class='mask-a-body-top-left-text'>我的</view>
        </view>
      </view>
    </view>
  <!-- </view> -->
</view>

wxss

/* 我是导航栏 start */

.fix-cont {
  position: fixed;
  right: 0;
  bottom: 270rpx;
  width: 105rpx;
  height: 90rpx;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
}

.font-size-1 {
  /* border: 1rpx solid #000; */
  box-sizing: border-box;
  vertical-align: top;
  line-height: 90rpx;
  color: #fff;
  font-size: 34rpx;
  width: 30rpx;
  text-align: center;
}

.font-size-2 {
  margin-left: -16rpx;
  /* border: 1rpx solid #000; */
  box-sizing: border-box;
  vertical-align: top;
  line-height: 90rpx;
  color: #b7b7b7;
  font-size: 34rpx;
  width: 30rpx;
  text-align: center;
}

.font-size-3 {
  width: 61rpx;
  height: 90rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #000; */
  font-size: 22rpx;
  /* display: flex; *//* text-align: center; *//*  *//* padding-top: 15rpx; */
}

.font-size-3-top {
  height: 45rpx;
  /* line-height: 45rpx; */
  padding-top: 12rpx;
  padding-left: 5rpx;
  width: 61rpx;
  /* border: 1rpx solid #000; */
  box-sizing: border-box;
  color: #fff;
}

.font-size-3-bottom {
  height: 45rpx;
  padding-left: 5rpx;
  /* line-height: 45rpx; */
  width: 61rpx;
  /* border: 1rpx solid #000; */
  box-sizing: border-box;
  color: #fff;
}

/* 我是导航栏 end */

/* 导航栏全部显示 start */

.mask-a {
  /* width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.3;
  overflow: hidden;
  z-index: 1000;
  color: #fff; */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.fix-cont-2 {
  position: fixed;
  right: 220rpx;
  bottom: 270rpx;
  width: 105rpx;
  height: 90rpx;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  z-index: 1001;
}

.mask-a-body {
  position: fixed;
  right: 0rpx;
  bottom: 215rpx;
  width: 220rpx;
  height: 220rpx;
  background: #f1f1f1;
  display: block;
  z-index: 1001;
}

.mask-a-body-top {
  width: 220rpx;
  height: 110rpx;
  /* border: 1rpx solid #b7b7b7; */
  box-sizing: border-box;
  display: flex;
}

.mask-a-body-bottom {
  width: 220rpx;
  height: 110rpx;
  /* border: 1rpx solid #b7b7b7; */
  box-sizing: border-box;
  display: flex;
}

.font-size-4 {
  width: 61rpx;
  height: 90rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #000; */
  font-size: 22rpx;
  color: #fff;
  /* display: flex; *//* text-align: center; *//*  *//* padding-top: 15rpx; */
  padding-top: 28rpx;
  padding-left: 5rpx;
}

.mask-a-body-top-left {
  height: 110rpx;
  width: 110rpx;
  box-sizing: border-box;
  border-right: 1rpx solid #b7b7b7;
  /* border: 1rpx solid #000; */
}

.mask-a-body-top-left-ico {
  margin: 10rpx auto 0 auto;
  width: 56rpx;
  height: 56rpx;
  /* border: 1rpx solid #000; */
  box-sizing: border-box;
}

.mask-a-body-top-left-ico image {
  width: 100%;
  height: 100%;
}

.mask-a-body-top-left-text {
  height: 40rpx;
  line-height: 40rpx;
  width: 110rpx;
  /* border: 1rpx solid #000; */
  box-sizing: border-box;
  font-size: 20rpx;
  text-align: center;
  color: #b3b2b3;
}

.mask-a-body-top-right {
  height: 110rpx;
  width: 110rpx;
  box-sizing: border-box;
  /* border-right: 1rpx solid #b7b7b7; */
  /* border: 1rpx solid #000; */
}

.mask-a-body-top-left-b {
  height: 110rpx;
  width: 110rpx;
  box-sizing: border-box;
  border-right: 1rpx solid #b7b7b7;
  border-top: 1rpx solid #b7b7b7;
  color: #b3b2b3;
}

.mask-a-body-top-right-b {
  height: 110rpx;
  width: 110rpx;
  box-sizing: border-box;
  border-top: 1rpx solid #b7b7b7;
  color: #b3b2b3;
}

/* 导航栏全部显示 end */

/* 导航栏 end */