vue 实现折叠展开动画效果1

折叠展开，如图所示效果：

20221013_折叠展开效果演示

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

<template>
	<div class="foldopen">
		<el-button type="primary" @click="clickOpenHidden">展开折叠----{
   
   { isOpen ? '折叠' : '展开' }}</el-button>

		<div class="wrapper" @click="clickOpenHidden">
			<div class="foldbox" style="margin-bottom: 0px;">
				我是一直显示的内容哦
			</div>

			<div class="openbox-container" style="margin-top: 0px" ref="openBox">
				<div class="content" style="height: 390px;">
					<div>这是打开的内容，可以在这里写内容啦</div>
					<div>哈哈哈哈哈啦啦啦啦啦......</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
      
      
	data() {
      
      
		return {
      
      
			isOpen: false, // 是否展开下方折叠内容
			openHeight: 0, // 折叠面板内容初始高度
		}
	},
	methods: {
      
      
		// 展开折叠
		clickOpenHidden() {
      
      
			this.isOpen = !this.isOpen
			
			let openBox = this.$refs.openBox
			let boxheight = openBox.offsetHeight
			if(boxheight === this.openHeight) {
      
       //展开
				openBox.style.height = 'auto'
				boxheight = openBox.offsetHeight
				openBox.style.height = this.openHeight + 'px'
				let f = document.body.offsetHeight  // 必加 (不知道具体是为什么必加, 测试时发现若不加在展开时候会没有过渡效果)
				openBox.style.height = boxheight + 'px'
			} else {
      
       //折叠
				openBox.style.height = this.openHeight + 'px'
			}
		},
	}
}
</script>

<style lang="less" scoped>
.wrapper {
      
      
	width: 1177px;
	height: auto;
	border: 1px solid gray;
	padding: 10px 16px;
	box-sizing: border-box;
	cursor: pointer;

	.foldbox {
      
      
		border: 1px solid red;
		height: 94px;
	}

	.openbox-container {
      
      
		height: 390px;
		height: 0;
		overflow: hidden;
		transition: height ease .5s; //动画效果
		background: transparent;
		box-sizing: border-box;

		.content {
      
      
			margin-top: 16px;
			background: darkslategray;
		}
	}
}
</style>

实现此效果参考文章地址：https://blog.51cto.com/u_15127527/4095958