利用 max-height 来实现下拉菜单的缓慢展开和关闭效果。通过设置一个固定的 max-height 值以及过渡效果，可以让菜单在展开和关闭时产生动画效果。
<template>
<div class="dropdown"><div class="selected" @click="toggleDropdown"><div class="text">{{ selectedOption.label }}</div></div><!-- :class="{ 'slide-down': isOpen, 'slide-up': !isOpen }" --><!-- v-if="isOpen" --><div class="dropdown-menu" :class="{ open: isOpen }"><div class="option" v-for="option in options" :key="option.value"@click="selectOption(option)"><!-- <div class="icon-box"><img :src="option.icon" alt="" class="icon"></div> --><div class="text">{{ option.label }}</div></div></div></div>
</template>
<style lang='scss' scope>.dropdown {width: 100%;position: relative;.selected {font-size: 14px;color: #333;border: none;box-sizing: border-box;// outline: 0 !important;margin: 0;cursor: pointer;display: flex;align-items: center;// border: 1px solid #eef3fd;background: #eef3fd;height: 2.604vw;padding: 0 2.083vw 0 1.041vw;border-radius: .729vw;height: 2.604vw;display: flex;align-items: center;// &:focus {// border: 1px solid #88dadf;// }&::before {content: "";display: block;width: .781vw;height: .781vw;background: url(../../assets/cardicons/arr2.png) center no-repeat;-webkit-background-size: contain;-moz-background-size: contain;-o-background-size: contain;background-size: contain;position: absolute;top: 50%;right: .781vw;margin-top: -.364vw;transition: .4s;}.text {line-height: 2.604vw;color: #353d61;font-weight: 700;font-size: .937vw;}}.dropdown-menu {position: absolute;top: 125%;left: 0;right: 0;z-index: 1000;border-radius: 1.041vw;border: 1px solid #ddd;background-color: #fff;padding: .208vw;overflow: hidden;overflow-y: auto;max-height: 0;overflow: hidden;transition: max-height 0.3s linear, padding 0.3s linear, opacity 0.3s linear;opacity: 0;/* 过渡效果 */// max-height: 13.02vw;// max-height: 0;// opacity: 0;// transform: translateY(-10px);// transition: opacity 1s linear, transform 1s linear;// &.slide-down {// opacity: 1;// transform: translateY(0);// }// &.slide-up {// opacity: 0;// transform: translateY(-10px);// }&.open {max-height: 300px;opacity: 1;/* 展开时最大高度 */// padding: 0.5rem 0;/* 展开时正常内边距 */}.option {display: flex;align-items: center;border-radius: .52vw;-webkit-transition: .3s;-o-transition: .3s;-moz-transition: .3s;transition: .3s;cursor: pointer;padding: 0 .833vw;height: 2.083vw;}.option:hover {background-color: #eef3fd;}.text {font-size: .833vw;color: #353d61;font-weight: 700;}}}
</script>
