vue 收缩动画

<template>
  <div>
    <el-button @click="boxshow = !boxshow">点击展开/关闭</el-button>
      <!--这里的name 和 css 类名第一个字段要一样-->
    <transition name="draw">
      <div class="box" v-if="boxshow"></div>
    </transition>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      boxshow: false,
    };
  },
};
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: black;
}
.draw-enter-active,
.draw-leave-active {
  transition: all 1s ease;
}
.draw-enter,
.draw-leave-to {
  height: 0;
}
</style>