如何通过CSS的:hover和transition效果制作具有动态交互的菜单导航动画？

本文共计805个文字，预计阅读时间需要4分钟。

直接给 ` :hover ` 加 ` color ` 或 ` background-color ` 不会产生动画效果，必须配合 ` transition ` 声明才生效。关键不是有没有 hover，而是过渡哪些属性、持续多长时间、使用什么缓动效果。

• transition 要写在常态（非 hover）的元素上，比如 .nav-item { transition: color 0.2s ease, background-color 0.2s ease; }
• 避免写成 transition: all 0.3s —— 容易意外触发 layout 变化（如 height、margin 改变），导致卡顿或重排
• 如果背景从透明变色，确保常态下 background-color 设为 transparent，而不是留空（留空等于 initial，可能被解析为 white）

下拉子菜单如何用 transition 实现淡入滑入效果

纯 :hover + display: none/block 无法过渡，因为 display 不是可动画属性。得换用 opacity 和 transform 配合 visibility 控制显隐。