vue导航栏下拉菜单（附带展开收缩动画）

先看效果：

下拉菜单铺满全屏

<div class="nav">...</div>
<div class="dropdown-content">...</div>

.nav {
   
	position: relative;
}
.dropdown-content {
   
	position: absolute;
	width: 100%;  // 拉满
}

下拉动画

方法一：鼠标移入移出事件

使用的是vue的 transition组件以及鼠标事件@mouseenter 和 @mouseleave

.dropdown-enter-active {
   
  animation: expand-contract 1s ease;
}
.dropdown-leave-active {
   
  animation: expand-contract 1s ease reverse;
}
// 收缩展开动画
@keyframes expand-contract {
   
  0% {
   
    overflow: hidden;
    opacity: 0;
    max-height: 0;
  }
  100% {
   
    max-height: 300px;  // 大于等于下拉菜单的高度
    opacity: 1;
  }
}

// 菜单内容变化动画
@keyframes menu {
   
  0% {
   
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
   
    opacity: 1;
    transform: translateX(0%);
  }
}

优点：

1. 结构层次清楚
2. 多个导航需要下拉菜单，且结构相似内容不同，只需要重新渲染数据即可。

缺点：

1. 使用了事件处理相对复杂

案例代码

<template>
  <div class="app-container">
    <!-- 导航栏 -->
    <div class="nav" ref="navRef">
      <div class="nav-item" @mouseenter="isShow = false">导航栏1</div>
      <div class="nav-item" @mouseenter="showDropDown('2')">导航栏2</div>
      <div class="nav-item" @mouseenter="showDropDown('3')">导航栏3</div>
      <div class="nav-item" @mouseenter="isShow = false">导航栏4</div>
      <div class="nav-item" @mouseenter="isShow = false">导航栏5</div>
    </div>
    <!-- 下拉菜单 -->
    <transition name="dropdown">
      <div v-show="isShow" class=