在制作自己项目的时候需要一个菜单功能，就去了解了一下微博设置的菜单的实现效果

• 观察阶段：

1.鼠标放在设置会延迟大约0.5s显示菜单
2.鼠标放在菜单和设置图标上都不会消失，但在外面就会延迟消失
到目前为止思路很简单，就是鼠标移入移出事件+定时器

3.在移出菜单后如果短时间内再次回归，则继续保留菜单（这里就需要添加逻辑判断）

4.伴随淡入淡出的动画功能

• 思路：

实现1和2：采用简单的鼠标移入移出事件+定时器
实现3：如何判断是在短时间内移出后再次移入的还是普通的移入：设置两个变量，一个用于控制菜单的显示与否，一个是新传入的boolean代表要转换的类型，

如果原本是false到true延迟开启
如果原本是true到false延迟关闭
如果原本是true到true说明在很短时间内鼠标又回到了菜单，关闭上一次的定时器

实现4：利用transition和animate.css动画库

• 实现部分：

添加事件：

代码逻辑：

const settingMenu = ref(false);//用于控制菜单的显示与否
let timer: NodeJS.Timeout | null = null;
const delay = (boolean: boolean) => {
	if (!(settingMenu.value && boolean)) {
		//如果原本是false到true延迟开启
		//如果原本是true到false延迟关闭
		timer = setTimeout(() => {
			settingMenu.value = boolean;
		}, 300);
	} else if (settingMenu.value && boolean) {
		//如果原本是true到true说明在很短时间内鼠标又回到了菜单，关闭上一次的定时器
		clearTimeout(timer!);
	}
};

动画效果：

1.leave-active-class="animate__animated animate__fadeOut"
leave-active-class代表离开时添加的类名，animate__animated是高版本animate.css里必须添加的类名，animate__fadeOut代表你要添加的动画类名，在animate.css动画库中自己找
2.enter-active-class="animate__animated animate__fadeIn"
enter-active-class代表显示时添加的类名

• 注意：animate.css的动画默认持续效果是2s，如果想修改动画持续时间，一定要改animate.css变量中的值，不能用transition中的durtion属性(这个属性是几秒后强制退出，不是把修改动画总持续时间，所以会很突兀)，还有用到animate.css之前记得先引入，可以在main.js引入，也可以在用到的地方的script引入 修改方式：

//引入animate.css样式
import "animate.css";
//这里举个例子修改全部动画的持续时间，也可以修改某个动画的持续时间，具体到animate.css官网自己查
document.documentElement.style.setProperty("--animate-duration", "0.2s");

可以加在main.js文件全局修改，也可以在用到的时候在script中修改

效果展示