根本原因是display在hover前后不一致：默认inline-block与hover时flex切换引发重排，导致::after基线对齐突变而下跳；修复需统一display为flex，hover仅调整opacity、transform等可过渡属性。
为什么 ::after 箭头在 hover 移出时会下跳
根本原因不是动画没写好，而是 display 在 hover 前后不一致：按钮默认是 inline-block（
必须统一基础态和 hover 态的 display
修复的关键是让按钮从一开始就是 flex 容器，hover 只改可过渡的属性，不碰布局模型：
- 把
display: flex、justify-content: center、align-items: center全部提前写在非 hover 规则里 -
:hover中只调整opacity、transform、padding或color这类不影响盒模型的属性 - 给
::after加vertical-align: middle或margin-top: -2px微调（仅当字体渲染有细微差异时需要）
伪元素本身也要避免触发重排
::after 若含 position: relative + top/left，配合父容器 display 切换，会放大抖动。建议：
- 用
transform: translateY(-2px)替代top: -2px - 确保
::after的content是纯字符（如"\f178"）或 SVG data URI，避免加载延迟导致尺寸跳变 - 若用 Font Awesome，确认已预加载字体，且
font-display: swap不会导致首次 hover 时字形重绘
transition 写在哪？怎么配才不白写
transition 必须写在非 hover 的基础规则里，否则第一次悬停无动画；且只对可硬件加速的属性生效：
- ✅ 推荐：
transition: opacity 0.2s ease, transform 0.2s ease - ⚠️ 慎用：
transition: padding 0.2s—— padding 变化可能引发重排 - ❌ 避免：
transition: width 0.3s或height 0.3s—— 直接触发 layout
真正容易被忽略的是：哪怕 display 一致，如果父容器或兄弟元素存在浮动、绝对定位干扰，仍可能间接导致基线计算偏差。遇到顽固抖动，先检查按钮是否被包裹在 text-align: center 的块级容器里——那会叠加一层行内对齐逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
