<template>
<div class="pages">
<button @click="block">显示/隐藏</button>
<transition name="fade" mode="out-in">
<div v-show="flag" key="fade" class="nbox">
<!-- 这里放置需要淡入淡出的内容 -->
<p>我是一个内容</p>
<p>我是一个内容</p>
<p>我是一个内容</p>
<p>我是一个内容</p>
<p>我是一个内容</p>
</div>
</transition>
<div>13123</div>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
flag: false,
};
},
mounted() {},
created() {},
methods: {
block() {
this.flag = !this.flag;
},
},
};
</script>
<style lang='scss' scoped>
button {
cursor: pointer;
}
.nbox {
width: 200px;
height: 200px;
border: 1px solid;
overflow: hidden;
}
.fade-enter-active,
.fade-leave-active {
height: 200px;
transition: 1.5s;
}
.fade-enter,
.fade-leave-to {
height: 0;
}
</style>
核心代码
<transition name="fade" mode="out-in">
<div v-show="flag" key="fade" class="nbox">
<!-- 这里放置需要淡入淡出的内容 -->
<p>我是一个内容</p>
<p>我是一个内容</p>
<p>我是一个内容</p>
<p>我是一个内容</p>
<p>我是一个内容</p>
</div>
</transition>
.fade-enter-active,
.fade-leave-active {
height: 200px;
transition: 1.5s;
}
.fade-enter,
.fade-leave-to {
height: 0;
}