使用Vue实现div上下收缩动画效果

封装组件

<!-- ShrinkView.vue -->
<template>
	<div class="shrink-view">
		<div ref="text" @click="show()" v-html="value" class="text" :style="{maxHeight: (mIsOpen?contentHeight:50) + 'px'}">
			
		</div>
		<div :class="mIsOpen?'btn active':'btn'" @click="show()"><u-icon class="icon" name="arrow-down" color="#000"
				size="20"></u-icon></div>
	</div>
</template>

<script>
	export default {
		props: {
			value: String
		},
		updated() {
			this.init();
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.$nextTick(() => {
					this.contentHeight = this.$refs.text.scrollHeight;
				});
			},
			show() {
				this.mIsOpen = !this.mIsOpen
			},
		},
		watch: {
			mIsOpen(newValue) {
				this.mIsOpen = newValue;
			}
		},
		data() {
			return {
				contentHeight: 0,
				mIsOpen: false,
			}
		}
	}
</script>

<style scoped lang="scss">
	.shrink-view {
		display: flex;
		justify-content: center;
		overflow: hidden;
		border-bottom: 1px solid #ccc;
	}

	.btn {
		font-size: 18px;
		width: 5%;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: rotate(0deg);
		transition: all 0.3s;
	}

	.active {
		transition: all 0.3s;
		transform: rotate(180deg) !important;
	}

	.text {
		margin: 20px 4px;
		width: 90%;
		-webkit-transition-duration: 300ms;
		-moz-transition-duration: 300ms;
		-ms-transition-duration: 300ms;
		-o-transition-duration: 300ms;
		transition-duration: 300ms;
		overflow: hidden;
	}
</style>

使用

<collapse v-model="'文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字'"></collapse>