纯VUE实现折叠面板

<template>
  <div>
    <div class="item">
        <button @click="boxshow = !boxshow">点击展开/关闭</button>
        <!--这里的name 和 css 类名第一个字段要一样-->
        <transition name="draw">   
            <div class="box"  v-show="boxshow"></div>
        </transition>
    </div>
  </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
             boxshow:false
        }
    }
}
</script>

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