vue中列表的展开收缩动画

展开收缩列表动画，关键是给父元素设置overflow:hidden，不要问我为什么，就是很玄学的一个属性
方式一：纯css,比较简单

<template>
    <div class="wrap">
        <div class="btn">
            <button @click="showPage = !showPage">切换</button>
        </div>
        <div :class="showPage ? 'content c-height' : 'content'">
                <div v-for="(item, index) in [1,2,3,4,5]" :key="index" class="item">{{index}}</div>
        </div>
    </div>
</template>

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

<style scoped>
.wrap {
    width: 100%;
    height: 100vh;
    position: relative;
}
.btn {
    width: 100%;
    height: 5vh;
    background-color: pink;
}
.content {
    width: 100px;
    height: 0;
    position: absolute;
    top: 5vh;
    left: 0;
    z-index: 99; 
    background-color: lime;
    transition: all 1s;
    overflow: hidden;
}
.c-height {
    height: 1000px;
}
.item {
    width: 100%;
    height: 100px;
    background-color: pink;
}

</style>

方式二：配合vue的transition内置属性

<template>
    <div class="wrap">
        <div class="btn">
            <button @click="showPage = !showPage">切换</button>
        </div>
        <transition name="mybox">
                <div class="content"  v-show="showPage">
                        <div v-for="(item, index) in [1,2,3,4,5]" :key="index" class="item">{{index}}</div>
                </div>
        </transition>
    </div>
</template>

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

<style scoped>
.wrap {
    width: 100%;
    height: 100vh;
    position: relative;
}
.btn {
    width: 100%;
    height: 5vh;
    background-color: pink;
}
.content {
    width: 100px;
    max-height: 0;
    position: absolute;
    top: 5vh;
    left: 0;
    z-index: 99; 
    background-color: lime;
    overflow: hidden;
}
.item {
    width: 100%;
    height: 100px;
    background-color: pink;
}
.mybox-leave-active,
.mybox-enter-active {
    transition: max-height 1s ease;
}
.mybox-leave-to,
.mybox-enter-from {
    max-height: 0;
}
.mybox-leave-from,
.mybox-enter-to {
    max-height: 1000px;
}

</style>