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

先看效果：

下拉菜单铺满全屏

<div class="nav">...div>
<div class="dropdown-content">...div>
1
2

.nav {
   
	position: relative;
}
.dropdown-content {
   
	position: absolute;
	width: 100%;  // 拉满
}
1
2
3
4
5
6
7
8
9

下拉动画

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

使用的是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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

优点：

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

缺点：

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

案例代码

<template>
  <div class="app-container">
    
    <div class="nav" ref="navRef">
      <div class="nav-item" @mouseenter="isShow = false">导航栏1div>
      <div class="nav-item" @mouseenter="showDropDown('2')">导航栏2div>
      <div class="nav-item" @mouseenter="showDropDown('3')">导航栏3div>
      <div class="nav-item" @mouseenter="isShow = false">导航栏4div>
      <div class="nav-item" @mouseenter="isShow = false">导航栏5div>
    div>
    
    <transition name="dropdown">
      <div v-show="isShow" class=
1
2
3
4
5
6
7
8
9
10
11
12