CSS伪元素::before/::after支持transition，但需显式设置初始样式（如opacity:1）、仅对可动画属性（opacity/transform等）使用，并避免display切换和重排属性。
CSS 的 ::before 和 ::after 伪元素本身**支持 transition**，但常见失效是因为它们默认没有可过渡的初始状态（比如未设置初始 opacity、transform 或颜色），或触发条件不满足「可动画属性 + 状态变化」这一前提。
确保伪元素有明确的初始样式
transition 不会凭空生效，必须先定义起始值。如果只在 hover 等状态下写 opacity: 0，而默认没设 opacity: 1，浏览器就无法计算过渡过程。
- ❌ 错误写法（缺少初始值）：
a:hover::after { opacity: 0; transition: opacity 0.3s; }
- ✅ 正确写法（显式声明初始态）：
content: "→";
opacity: 1;
transition: opacity 0.3s;
}
a:hover::after { opacity: 0; }
只对支持过渡的 CSS 属性使用 transition
不是所有属性都能被 transition。伪元素能过渡的属性和普通元素一致，例如：
-
opacity、transform、color、background-color -
left/top等定位属性（需配合position） - ⚠️ 注意：
content、display、height/width（当由auto变化时）等**不可过渡**
避免 display: none / block 切换导致过渡丢失
伪元素若用 display: none 隐藏，再切回 block，会中断过渡（因为元素被完全移除渲染树）。应改用视觉隐藏方式：
立即学习“前端免费学习笔记（深入）”；
- 用
opacity: 0+visibility: hidden替代display: none - 用
transform: scale(0)或translateX(-100%)实现位移隐藏 - 确保
visibility和opacity都参与 transition（二者需同时变化才自然）
检查是否触发了重排（reflow）而非重绘（repaint）
某些属性（如 width、height、margin）变化会触发重排，影响性能且可能让过渡卡顿。优先用 transform 和 opacity —— 它们只触发合成（compositor），更流畅：
- ✅ 推荐：
transform: translateX(10px); - ❌ 避免：
left: 10px;（尤其在非定位元素上无效）
