展开收缩列表动画，关键是给父元素设置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>
