高度不固定下拉框的过度动画，怎么实现？

要实现高度不固定的下拉框过渡动画，可以使用 CSS 的transition属性结合 JavaScript 或相关前端框架（如 Vue、React）来实现。以下分别是原生 JavaScript 和 Vue 框架下的实现方式：

原生 JavaScript 实现

HTML 结构

html

xml 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="dropdown">
    <button class="dropdown-toggle">下拉菜单</button>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item">选项1</a>
      <a href="#" class="dropdown-item">选项2</a>
      <a href="#" class="dropdown-item">选项3</a>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

CSS 样式

css

css 复制代码

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  /* 过渡效果 */
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.dropdown-menu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-menu a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-menu {
  display: block;
  /* 高度由内容自适应 */
  height: auto;
  max-height: 300px; /* 可根据需要调整最大高度 */
  opacity: 1;
}

JavaScript 逻辑

javascript

javascript 复制代码

// 获取下拉菜单元素
const dropdownMenu = document.querySelector('.dropdown-menu');

// 为下拉按钮添加点击事件监听器
document.querySelector('.dropdown-toggle').addEventListener('click', function () {
  // 切换下拉菜单的显示状态
  dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
});

Vue 框架实现

HTML 结构

html

xml 复制代码

<template>
  <div class="dropdown">
    <button class="dropdown-toggle" @click="showDropdown = !showDropdown">下拉菜单</button>
    <transition name="dropdown-transition">
      <div v-show="showDropdown" class="dropdown-menu">
        <a href="#" class="dropdown-item" v-for="(item, index) in dropdownItems" :key="index">{{ item }}</a>
      </div>
    </transition>
  </div>
</template>

CSS 样式

css

css 复制代码

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  overflow: hidden;
  /* 初始高度为0 */
  height: 0;
  opacity: 0;
  /* 过渡效果 */
  transition: all 0.3s ease-in-out;
}

.dropdown-menu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-menu a:hover {
  background-color: #f1f1f1
}

/* 过渡类名 - 进入时 */
.dropdown-transition-enter-active {
  height: auto;
  opacity: 1;
  max-height: 300px; /* 可根据需要调整最大高度 */
}

/* 过渡类名 - 离开时 */
.dropdown-transition-leave-active {
  height: 0;
  opacity: 0;
}

JavaScript 逻辑

javascript

javascript 复制代码

import { ref } from 'vue';

export default {
  setup() {
    // 控制下拉菜单显示隐藏的响应式变量
    const showDropdown = ref(false);
    // 下拉菜单选项数据
    const dropdownItems = ref(['选项1', '选项2', '选项3']);

    return {
      showDropdown,
      dropdownItems
    };
  }
};

以上代码通过 CSS 的过渡效果和 JavaScript 或 Vue 的逻辑控制，实现了一个高度不固定的下拉框过渡动画。当鼠标悬停或点击下拉按钮时，下拉菜单会以平滑的过渡效果显示或隐藏。