直接改 transform 的 translatex 会卡顿，因频繁触发样式计算、布局、绘制及主线程抢占；应改用 css 变量 + will-change 提升图层 + @property 注册动画属性实现丝滑拖拽。
为什么直接改 transform 的 translateX 会卡顿
因为每次 touchmove 触发时，如果用 element.style.transform = `translateX(${x}px)` 这种方式硬设，浏览器要反复触发样式计算 + 布局 + 绘制流水线，尤其在低端安卓机上容易掉帧。更关键的是，JS 主线程被频繁抢占，手指一快就“脱手”——动画跟不上。
真正丝滑的做法是把位移值交给 CSS 变量托管，让渲染引擎自己决定何时更新、如何插值。前提是：变量必须绑定到 will-change 提升的图层上，且不触发重排。
- 必须给目标元素加
will-change: transform（或transform: translateZ(0)）强制 GPU 加速 - CSS 变量名要统一前缀，比如
--drag-x，避免和业务其他变量冲突 - 不能在
touchmove里调用getBoundingClientRect()或读取offsetLeft，否则强制同步回流
如何用 style.setProperty() 安全更新 CSS 变量
别用 element.style.setProperty('--drag-x', x + 'px') —— 这会污染内联样式，后续 CSS 里写的 var(--drag-x) 可能被覆盖。正确做法是操作 :root 或一个专用的 style 节点。
推荐创建一个空 <style id="drag-styles"></style>，然后动态写入：
const styleEl = document.getElementById('drag-styles');
styleEl.textContent = `:root { --drag-x: ${x}px; --drag-y: ${y}px; }`;
这样变量作用域干净，也方便全局复用。注意：不要高频拼接字符串，可以节流到每 8ms 一次（接近 120fps 下限）。
- 若只做单方向拖动（如横向轮播），只需维护
--drag-x，--drag-y留空或设为0 - 变量值必须带单位（
px、rem），纯数字会被当成无效值丢弃 - 首次设置前，确保 CSS 中已声明默认值，例如
:root { --drag-x: 0px; }，否则var(--drag-x)回退失败
transform: translate(var(--drag-x), var(--drag-y)) 的兼容性陷阱
这个写法在 iOS Safari 15.4+、Chrome 100+、Android Chrome 105+ 没问题，但老版本 Safari（如 iOS 14.8）不支持 var() 在 transform 里直接计算。实际项目中，得降级处理。
检测方式很简单：
const supportsVarInTransform = CSS.supports('transform', 'translate(var(--x))');
不支持时，改用 transform: translateX(var(--drag-x)) translateY(var(--drag-y))，这是 Safari 13.1 就支持的写法。
- 别信 CanIUse 上“partial support”的模糊描述，真机测 iOS 14.6 的 WKWebView 就会挂
- 如果用了 PostCSS，
postcss-custom-properties插件会在构建时静态替换变量，但失去运行时动态能力，慎用 - 某些安卓 WebView（如华为 EMUI 12 内置）对
var()在transform中的解析有内存泄漏，建议加个兜底定时器清空变量值
松手后惯性动画怎么接上 CSS 变量
松手瞬间，你手里只有当前 --drag-x 值和上一次 touchmove 的时间戳。靠 JS 自己算速度再用 requestAnimationFrame 模拟惯性？太重，且和 CSS 动画节奏不同步。
更轻量的做法是：把 CSS 变量转成一个可动画的属性，用 @property 注册为受控类型：
@property --drag-x { syntax: '<length>'; inherits: false; initial-value: 0px; }</length>
之后就能直接对变量本身做 transition: --drag-x 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94)。松手时只要再调一次 style.setProperty('--drag-x', finalX + 'px')，动画自动触发。
注意：@property 目前仅 Chromium 和 Safari 16.4+ 支持，iOS 16.4 是硬门槛。没支持时，只能 fallback 到 JS 动画库（如 framer-motion 的 useSpring）。
最常被忽略的一点：CSS 变量动画的缓动函数必须显式声明在变量上，而不是写在 transform 属性的 transition 里——后者根本不会生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
