Vue显示和隐藏如何用动画形式显示

过渡效果类似于推拉门：

<template>
  <div id="app">
     <button class="btn" @click="show = !show">click</button>
    <transition name='fade'>
      <div class="box1" v-if="show">
        <div class="box2"></div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  
  data() {
    return {
      show: true
    }
  },
}
</script>
<style lang="less">
.box1 {
  width: 200px;
  height: 200px;
  background-color: green;
  // position: absolute;
  // overflow: hidden;
}
.box2 {
  width: 50px;
  height: 50px;
  background-color: red;
  position: fixed;
  // top: 60px;
  // left: 30px;
}
.fade-enter-active, .fade-leave-active {
  transition: 1s;
}
.fade-enter, .fade-leave-to{
   opacity: 0;
  transform: translateX(-25rem);
}
</style>

然后：发现固定定位仿佛是对