Vue3 CSS 怎么实现菜单滑动的效果

目的，hover 菜单从左侧滑出来，离开鼠标状态不变，菜单不隐藏，第二次hove滑回去 隐藏
**用transition
我试了一下 hover 可以有滑出效果，
但是 鼠标离开又进去了。不能保持状态，
请教有什么简便方法可以达到我要的效果？
**
不是要抽屉效果，展开时要把右边内容区挤小，而不是遮着，

用hover不行, 要用js的mouseenter事件
第一次mouseenter事件 菜单从左侧滑出来，
第二次mouseenter事件滑回去 隐藏

Vue 上下滑动抽屉菜单实现
https://blog.csdn.net/dongxingxxx/article/details/112245574?spm=1005.2026.3001.5635&utm_medium=distribute.pc_relevant_ask_down.none-task-blog-2~default~OPENSEARCH~Rate-4-112245574-ask-7721187.pc_feed_download_top3ask&depth_1-utm_source=distribute.pc_relevant_ask_down.none-task-blog-2~default~OPENSEARCH~Rate-4-112245574-ask-7721187.pc_feed_download_top3ask

1.用mousemove或者mouseenter事件
2.判断是否显示采用
你用的是vue

<div class="menu" v-show="isShow" @mousemove="isShow = !isShow"></div>

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632