vue transition实现折叠展开动画效果2

折叠展开效果如下：

20221013_折叠展开效果演示2

新建foldOpen-transition.vue文件，可直接复制粘贴使用。

<template>
	<div class="foldopen">
		<el-button type="primary" @click="showOrHidden()">展开折叠----{{ isShowBox ? '折叠' : '展开' }}</el-button>
		<el-button type="primary" @click="clickShow()">展开</el-button>
		<el-button type="primary" @click="clickHidden()">折叠</el-button>
		
		<div>
			<!-- 页面一直显示的 -->
			<div class="topshow" style="border-bottom: 1px solid gray;" ref="topshow" @click="clickShow()">
				<div class="topshow-content">
					我是一直显示的内容哦
				</div>
			</div>

			<!-- 折叠的内容 -->
			<transition name="mybox">
				<div class="box-container" v-show="isShowBox">
					<div>^-^我是展开后显示的内容，哈哈哈哈哈啦啦啦啦啦*^-^</div>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			isShowBox: false
		}
	},
	methods: {
		showOrHidden() {
			this.isShowBox = !this.isShowBox
			var topshow = this.$refs.topshow
			if(this.isShowBox) {
				topshow.style.borderBottomColor = 'transparent' //把页面显示的下边框颜色设置为透明
				topshow.style.marginBottom = '0px' //把页面显示的下外边距设置为0
			} else {
				setTimeout(() => {
					topshow.style.borderBottomColor = 'gray' //把页面显示的下边框颜色设置为原来的颜色
					topshow.style.marginBottom = '20px' //把页面显示的下外边距设置为原来的外边距
				}, 1000);
			}
		},
		// 展开
		clickShow() {
			this.isShowBox = true

			var topshow = this.$refs.topshow
			topshow.style.borderBottomColor = 'transparent' //把页面显示的下边框颜色设置为透明
			topshow.style.marginBottom = '0px' //把页面显示的下外边距设置为0
		},
		// 折叠
		clickHidden() {
			this.isShowBox = false

			var topshow = this.$refs.topshow
			setTimeout(() => {
				topshow.style.borderBottomColor = 'gray' //把页面显示的下边框颜色设置为原来的颜色
				topshow.style.marginBottom = '20px' //把页面显示的下外边距设置为原来的外边距
			}, 1000);
		},
	}
}
</script>

<style lang="less" scoped>
.topshow {
	width: 1177px;
	// height: 100px;
	height: auto;
	padding: 18px 16px;
	margin-bottom: 20px;
	border: 1px solid gray;
	background: WhiteSmoke;
	box-sizing: border-box;
	cursor: pointer;

	.topshow-content {
		border: 1px solid red;
		height: 90px;
	}

	&:last-child {
		margin-bottom: 0;
	}
}

.box-container {
	width: 1177px;
	height: 396px;
	background: WhiteSmoke;
	border: 1px solid gray;
	padding: 0 16px;
	border-top: 0;
	overflow: hidden;
}

.mybox-leave-active,
.mybox-enter-active {
	transition: all 1s ease;
}
.mybox-leave-active,
.mybox-enter {
	height: 0px !important;
}
.mybox-leave,
.mybox-enter-active {
	height: 396px;
}
</style>