自动高度过渡动画展开效果

<template>
    <div class="father">
        <button @click="optionShow = !optionShow">展开/收起</button>
        <transition @beforeEnter="handleBeforeEnter" @enter="handleEnter" @afterEnter="handleAfterEnter">
            <div v-if="optionShow" class="option">
                <div class="option-item">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                </div>
            </div>
       </transition>
    </div>
</template>
<script setup>
const optionShow = ref(false);
const handleBeforeEnter = (el) => {
	console.log(el);
	el.style.height = '0px';
};
const handleEnter = (el) => {
	el.style.height = 'auto';
	let h = el.clientHeight;
	el.style.height = '0px';
	requestAnimationFrame(() => {
		el.style.height = h + 'px';
		el.style.transition = '.5s';
	});
};
const handleAfterEnter = (el) => {
	el.style.transition = 'initial';
};
</script>
<style lang="scss">
.father {
	position: relative;
	.option {
		position: absolute;
		top: 55px;
		background-color: aquamarine;
		width: 150px;
		overflow: hidden;
	}
}
</style>

这段代码是一个 Vue 3 组件，实现了一个简单的展开/收起效果。让我逐步解释这段代码：

1. <template> 部分：

   • 在模板中，定义了一个按钮用于触发展开/收起操作，按钮的点击事件绑定了 optionShow 变量，通过点击按钮切换 optionShow 的值。
   • 使用了 Vue 的过渡动画，通过 <transition> 包裹了一个 <div> 元素，实现展开/收起的过渡效果。
   • 在 <div> 中，使用了 v-if="optionShow" 控制元素的显示与隐藏。当 optionShow 为 true 时，展示内部内容。

2. <script setup> 部分：

   • 使用了 <script setup> 语法，简化了 Vue 3 组件的代码。
   • 引入了 ref 函数，创建了一个响应式变量 optionShow，用于控制展开/收起的状态。
   • 定义了三个生命周期钩子函数 handleBeforeEnter、handleEnter 和 handleAfterEnter，用于过渡动画的控制。

3. 生命周期钩子函数：

   • handleBeforeEnter: 在元素进入过渡之前调用，通过设置 el.style.height 为 '0px'，将元素的高度初始化为 0。
   • handleEnter: 在元素进入过渡中调用，通过设置 el.style.height 为 'auto'，获取元素的实际高度，并使用过渡动画逐步展开。
   • handleAfterEnter: 在元素进入过渡结束后调用，通过设置 el.style.transition 为 'initial'，避免后续改变元素高度时产生过渡效果。

4. <style> 部分：

   • 使用了 SCSS 语法定义了样式，.father 类包含了一个绝对定位的 .option 子元素，用于展示具体的选项内容。
   • 设置了 .option 的样式，包括定位、背景颜色、宽度和溢出隐藏。

这段代码的目的是通过按钮点击实现一个简单的展开/收起效果，展开时显示具体的选项内容，收起时隐藏。过渡动画通过设置元素的高度和过渡属性来实现。