Vue下拉菜单过渡实现及跨元素类名切换方法咨询

1. 修改模板，绑定动态类名 #

给下拉列表的容器添加Vue动态类绑定，根据状态切换展开/收起类：

<div class="dropdownMenuWrapper">
  <ul class="dropdownMenu">
    <li class="dropdownMenuItem"> Menu 1 </li>
    <button class="arrow" @click="toggleActive">></button>
  </ul>
</div>

<div class="dropdownListWrapper" :class="{ 'expanded': isExpanded }">
  <ul class="dropdownList">
    <li class="dropdownItem">DropdownItem</li>
    <li class="dropdownItem">DropdownItem</li>
    <li class="dropdownItem">DropdownItem</li>
  </ul>
</div>

2. 添加Vue状态与切换方法 #

根据你使用的Vue版本，在组件/实例中定义响应式状态和点击切换方法：

Vue2 选项式API #

export default {
  data() {
    return {
      isExpanded: false // 默认收起
    }
  },
  methods: {
    toggleActive() {
      this.isExpanded = !this.isExpanded // 点击切换状态
    }
  }
}

Vue3 组合式API #

import { ref } from 'vue'

export default {
  setup() {
    const isExpanded = ref(false)
    const toggleActive = () => {
      isExpanded.value = !isExpanded.value
    }
    return { isExpanded, toggleActive }
  }
}

3. 编写CSS过渡样式 #

设置初始收起状态、过渡动画及展开后的高度，注意添加overflow: hidden防止内容溢出：

.dropdownListWrapper {
  height: 0;
  overflow: hidden;
  transition: height 1s ease; /* 1秒平滑过渡 */
}

.dropdownListWrapper.expanded {
  height: 100px; /* 展开后的目标高度 */
}

可选优化 #

如果不想固定高度，可改用max-height实现适配内容的过渡（设为足够容纳内容的数值即可），但流畅度略低于固定高度方案：

.dropdownListWrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease;
}

.dropdownListWrapper.expanded {
  max-height: 200px; /* 设为大于内容实际高度的数值 */
}

内容的提问来源于stack exchange，提问作者mikasa