vue3下拉選單點選之後緩慢展開與緩慢關閉

利用 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>