最稳妥的缩进动画方式是用padding-left实现，因其渲染开销低且不触发重排；需设初始值、避免百分比单位、限定transition属性、优选贝塞尔曲线，并注意line-height对齐及移动端:hover兼容性问题。
hover时用padding-left实现缩进动画
直接改 padding-left 是最稳妥的缩进动画方式，浏览器渲染开销低，且不会触发重排（layout）——只要父容器有明确宽度或不依赖内容撑开，就不会因 padding 变化导致布局抖动。
常见错误是用 margin-left 或 transform: translateX() 模拟缩进：前者可能影响兄弟元素位置，后者虽性能好但脱离文档流，若列表项内有绝对定位子元素，其参照系会意外偏移。
- 推荐写法：
padding-left: 0; transition: padding-left 0.2s ease;→&:hover { padding-left: 20px; } - 必须设初始值（如
padding-left: 0），否则首次 hover 无过渡效果（transition 不作用于“从无到有”） - 避免用百分比单位（如
padding-left: 5%），响应式缩进易失控；固定像素或rem更可控
transition要限定具体属性，别偷懒写all
transition: all 0.2s 看似省事，但实际会让所有可动画属性（包括 color、opacity、甚至未预期的 border-color）一起过渡，造成视觉干扰或性能浪费。更糟的是，某些浏览器对 all 的兼容处理不一致，比如 Safari 可能跳过部分属性动画。
- 只声明需要动的属性：
transition: padding-left 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); - 贝塞尔曲线建议用
cubic-bezier(0.34, 1.56, 0.64, 1)（轻微 overshoot），比默认ease更显“弹性缩进”感 - 如果同时动多个相关属性（如 padding-left + background-color），显式列出：
transition: padding-left 0.2s, background-color 0.2s;
列表项包含内联元素时，line-height可能破坏对齐
当 li 内有 span、a 等内联子元素，且设置了 vertical-align: middle 或行高不一致，hover 缩进后文字常出现上下微移——这不是动画问题，而是 baseline 对齐在 padding 变化后重新计算所致。
- 统一设
line-height: 1.5（数值，非 unitless）并保持父子一致 - 给
li加box-sizing: border-box，确保 padding 不额外撑高行盒 - 极端情况可强制基线对齐：
li { display: flex; align-items: center; }，但会改变原有文档流行为，慎用
移动端点击穿透与伪类兼容性
iOS Safari 和旧版 Android WebView 对 :hover 支持不稳定：触摸屏首次点击可能不触发 hover，或 hover 状态滞留不消失。这不是动画问题，而是伪类触发机制差异。
- 必须加
@media (hover: hover) and (pointer: fine)媒体查询包裹 hover 规则，避免触屏设备误执行 - 测试时用真机点按，别只靠桌面 Chrome 的“device toolbar”模拟 —— 后者无法复现真实 touchstart/touchend 事件顺序
- 如果需兼顾点击反馈，用 JavaScript 监听
touchstart并临时加 class（如.is-hovered），再配 CSS 动画，比纯 :hover 更可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
