css3滑动出现工具栏

效果图（gif有延迟，真实效果很流畅，拍gif截图的软件名为：GifCam）：

代码(关键注释在css里)：

<template>
  <div class="test3-container">
    <div class="test3-bg" :class="{ show: show }"></div>
    <div class="test3-box" :class="{ show: show }">
      <div class="icon-box" @click="show = !show">
        <i :class="show ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"></i>
      </div>
      <div class="rightToll">
        右侧工具栏
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
moment.locale('zh-cn')
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>
<style lang="scss" scoped>
.test3-container {
  flex-grow: 1;
  .test3-bg {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
    background: rgba(0, 0, 0, 0.2);
    z-index: -1;
  }
  .test3-bg.show {
    z-index: 20000;
    opacity: 1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
  }
  .test3-box {
    width: 260px;
    height: 100vh;
    position: fixed;
    //固定定位，相对于顶点位置而言
    top: 0;
    right: 0;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
    transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
    transform: translate(100%, 0);
    //transform：translate(100%,0):向左（Y轴）向下（X轴）移动自身长宽的100%和0
    background: #fff;
    z-index: 40001;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
    -webkit-transform: translate(100%, 0);
    .icon-box {
      top: 400px;
      background-color: rgb(24, 144, 255);
      width: 48px;
      height: 48px;
      position: absolute;
      left: -48px;
      text-align: center;
      font-size: 24px;
      border-radius: 6px 0 0 6px !important;
      z-index: 0;
      pointer-events: auto;
      cursor: pointer;
      color: #fff;
      line-height: 48px;
    }
  }
  .test3-box.show {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    .rightToll {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      //在父盒子居中
    }
  }
}
</style>