先来看一下小米商城标题栏动画：
小米商城标题栏动画主要特点：
- 移入时二级菜单缓慢出现；
- 移出时二级菜单缓慢消失；
- 在一级菜单之间移动时，二级菜单内容直接切换，没有过渡效果。
实现思路
一、纯css实现（❌）
首先肯定是考虑 :hover，但是经过试验发现，:hover 可以实现鼠标移入移出时的过渡效果，但在一级菜单之间移动时，二级菜单总是有过渡效果。
纯css代码：
1 <script setup>
2 import { ref } from "vue";
3
4 const titles = ref([
5 {
6 name: "小米商城", path: "", children: []
7 },
8 {
9 name: "Xiaomi手机", path: "", children: [
10 { name: "小米13", path: "" },
11 { name: "小米13Pro", path: "" },
12 { name: "小米11 青春活力版", path: "" },
13 ]
14 }, {
15 name: "Redmi手机", path: "", children: [
16 { name: "红米 K60", path: "" },
17 { name: "红米 12C", path: "" },
18 { name: "红米 Note 12", path: "" },
19 ]
20 },
21 {
22 name: "电视", path: "", children: [
23 { name: "智能电视X65", path: "" },
24 { name: "小米透明电视", path: "" },
25 { name: "小米电视 大师 77", path: "" },
26 { name: "小米电视 大师 65英寸", path: "" },
27 ]
28 },
29 {
30 name: "笔记本", path: "", children: [
31 { name: "Xiaomi BookAir 13", path: "" },
32 { name: "Xiaomi Book Pro14", path: "" },
33 ]
34 }
35 ])
36
37 </script>
38
39 <template>
40 <q-page>
41 <header class="row q-pa-lg bg-grey justify-center">
42 <div class="container row justify-center bg-yellow">
43 <!-- 一级标题 -->
44 <div class="menu text-h5 col text-center" v-for="menu in titles" :key="menu.name">
45 <span>{{ menu.name }}</span>
46 <!-- 二级标题 -->
47 <ul class="sub-menu row justify-center bg-green">
48 <li class="q-ma-lg" v-for="submenu in menu.children" :key="submenu.name" @click="clickSubmenu(submenu)">
49 {{ submenu.name }}
50 </li>
51 </ul>
52 </div>
53 </div>
54 </header>
55
56 <div>
57 <h4 class="text-center">模拟小米官网titlebar动画</h4>
58 <ul class="text-body1">动画特点如下：
59 <li>鼠标从container外部移入任意一级菜单（有children）时，显示二级菜单（有过渡效果）</li>
60 <li>鼠标从一级菜单（有children）移出container时，二级菜单消失（有过渡效果）</li>
61 <li>鼠标从一级菜单（有children）移入一级菜单（无children）等同于移出container：二级菜单消失（有过渡效果）</li>
62 <li>--------------- 以上可以用 纯css 实现
标签：index,菜单,container,name,quasar,标题栏,api,menu,path
From： https://www.cnblogs.com/sunshine233/p/17305715.html