利用 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>
标签:transition,vue3,height,background,vw,缓慢,border,下拉菜单,size
From: https://www.cnblogs.com/xianlling/p/18389562