滑动卡顿或跳变的根本原因是transform起始/结束状态未被识别为可过渡属性；必须用translatex/y、写在常驻元素上、避免混用非动画属性；移动端拖拽需js动态设置transform；推荐0.25s–0.35s时长和cubic-bezier(0.25,0.46,0.45,0.94)缓动；亚像素模糊需math.round()取整、will-change和字体抗锯齿优化。
滑动效果卡顿或瞬间跳变，transition 没生效？
根本原因通常是 transform 的起始/结束状态没被浏览器识别为可过渡的“动画属性”。transition 只对可计算、可插值的 CSS 属性有效，而如果你用 display: none 切换、或靠 left/top + position: static 移动，浏览器无法平滑过渡。
- 必须用
transform: translateX()（或translateY()）做位移，它触发合成层，性能好且天然支持过渡 -
transition要写在“始终存在”的元素上，不能写在临时添加的 class 里却不预留初始transform值 - 避免同时过渡
transform和opacity以外的属性（比如width或height），容易触发重排
错误示例：.slide { transition: left 0.3s; } → left 不触发硬件加速，小屏设备明显卡顿
移动端手指滑动后视图不动，transform 值没更新？
纯 CSS 无法响应手指拖拽，transform 是静态声明，不会随触摸实时变化。要实现“拖着走”的交互，必须用 JS 读取 touchmove 事件并动态设置 style.transform。
- 监听
touchstart记下初始位置，touchmove计算偏移量，touchend再决定是回弹还是吸附到下一屏 - 直接改
element.style.transform = `translateX(${x}px)`，别用classList切换预设 class —— 预设 class 无法表达任意像素值 - 记得加
touch-action: pan-x防止浏览器默认横向滚动干扰
关键点：CSS 负责定义“怎么动”，JS 负责决定“动多少”；两者缺一不可。
立即学习“前端免费学习笔记（深入）”；
transition 时间和缓动函数怎么选才不晕？
滑动不是越快越好。0.1s 看似快，但人眼跟不上，感觉是闪；0.6s 又太拖沓，像卡住。真实产品中，0.25s–0.35s 是较稳妥的区间。
- 用
cubic-bezier(0.25, 0.46, 0.45, 0.94)（即ease-out的变体）比默认ease更自然：起步稍快，收尾柔和，符合物理惯性 - 避免
ease-in：开头太慢，用户会误以为没响应 - 如果滑动距离长（比如整屏宽度），可略延长至
0.4s；短距离（如图标微调）用0.2s
别硬记数值，打开 DevTools，在 Styles 面板里实时拖动 transition-duration 和 transition-timing-function 调，眼睛比文档更准。
滑动后页面内容错位、文字模糊？
这是 transform 合成层未对齐像素导致的亚像素渲染问题，尤其在 Safari 和部分安卓 WebView 中明显。
- 强制开启硬件加速：给滑动容器加
will-change: transform（仅在需要时加，别滥用） - 确保 translate 值是整数：JS 计算后用
Math.round(x)，避免translateX(123.456px) - 如果内容含细线或小字号文字，加
-webkit-font-smoothing: antialiased缓解模糊
最常被忽略的是：父容器有 overflow: hidden 但子元素 transform 超出后，边缘裁切可能产生半像素锯齿 —— 这时候宁可加 1px 内边距，也别让内容紧贴裁切边界。
