列表项 hover 闪烁的根本原因是布局重排，应避免 hover 改变 padding、border、width 等盒模型属性，优先使用 transform 和 opacity 配合精准 transition 实现平滑动画。
列表项 hover 闪烁，通常是因为元素在悬停时尺寸、边距、内边距或背景等属性发生了突变，导致布局重排（reflow）或重绘（repaint），进而引发视觉跳动或闪烁。为 hover 状态添加 transition 能缓解动画生硬问题，但**仅加 transition 并不能根治闪烁**——关键是要避免触发布局变化。
确保 hover 前后不改变元素几何尺寸
很多闪烁源于 hover 时意外增加了 padding、border 或改变了 width/height。例如：
❌ 错误写法（hover 添加 border 导致宽度变化）：
li { border: 1px solid transparent; }
li:hover { border-color: #007bff; } /* 实际上 border-style 从 'none' 变成 'solid' 更危险 */
✅ 正确写法（预留透明边框，只改颜色）：
立即学习“前端免费学习笔记（深入）”；
li {
border: 1px solid transparent; /* 始终存在，不占位变化 */
transition: border-color 0.2s ease;
}
li:hover { border-color: #007bff; }
- 所有可能变化的盒模型属性（padding、margin、border、width、height）都应在默认状态就定义好，hover 仅修改颜色、opacity、transform 等不触发重排的属性
- 用 outline 替代 border（outline 不占布局空间），适合强调效果
优先使用 transform 和 opacity 实现 hover 动画
这两个属性由 GPU 加速，不会触发重排重绘，最稳定：
li {
transition: transform 0.2s ease, opacity 0.2s ease;
}
li:hover {
transform: translateY(-2px); /* 轻微上浮 */
opacity: 0.95;
}
- 避免对 left/top 或 margin 做过渡（会触发重排）
- 如需缩放，用
transform: scale(1.05)，别改font-size或width
检查是否被父容器 overflow 或 display 干扰
某些情况下，父元素设置了 overflow: hidden，而 hover 时子元素因定位或 transform 溢出，浏览器渲染策略变化也会造成闪烁（尤其 Safari）：
- 给父容器加
will-change: transform提前提示优化（慎用，仅对频繁动画元素） - 确保列表项没有
position: relative+z-index导致层叠上下文混乱 - 移除不必要的
display: inline-block或浮动，改用display: flex布局更稳定
过渡时间与属性要精准指定
不要写 transition: all 0.3s —— 它会让所有属性都参与过渡，包括你没意识到会变的（比如 height 自动计算值），反而加剧闪烁：
/* ❌ 不推荐 */
li { transition: all 0.3s; }
<p>/<em> ✅ 推荐：只过渡明确控制的属性 </em>/
li { transition: background-color 0.2s, transform 0.2s, color 0.2s; }
- 过渡时间建议 0.15s–0.3s，太长显得迟滞，太短失去缓动意义
- 搭配
ease-in-out或cubic-bezier(0.25, 0.46, 0.45, 0.94)让动效更自然
