transition 必须写在宽度实际变化的元素（如 .mask）上，而非父容器；需设初始 width 值，优先用 transform: scaleX() 替代 width 实现平滑动画。
transition 该写在哪个元素上才生效
遮罩层宽度变化不平滑，大概率是因为 transition 没加对地方。它必须写在「宽度实际发生变化的那个元素」上，而不是父容器或伪元素上。
常见错误是把 transition: width 0.3s 加在包裹滑块的 .slider-container 上，但真正变宽的是里面的 .mask 层——所以过渡声明得落在 .mask 的 CSS 规则里。
- 如果用 JavaScript 动态改
style.width，.mask必须有初始width（不能是auto或未声明） - 避免同时写
transition和will-change: width，后者可能干扰重绘节奏 - 用
transform: scaleX()替代width更稳妥（硬件加速、无重排），但需配合transform-origin: left
拖拽时 width 跳变或卡顿
鼠标移动事件触发太密，直接赋值 element.style.width 会导致 layout thrashing，尤其在低性能设备上明显跳帧。
关键不是“怎么算宽度”，而是“什么时候更新”。别在 mousemove 里实时设样式，改用 requestAnimationFrame 节流：
立即学习“前端免费学习笔记（深入）”；
let pending = false;
element.addEventListener('mousemove', () => {
if (!pending) {
pending = true;
requestAnimationFrame(() => {
const w = calcWidth();
mask.style.width = w + 'px';
pending = false;
});
}
});- 不要用
setTimeout(..., 0)替代requestAnimationFrame，后者与屏幕刷新同步 - 确保
calcWidth()是纯计算函数，不读取offsetWidth等会触发重排的属性 - 移动端需监听
touchmove并preventDefault()，否则 iOS Safari 会截断事件流
IE 或旧版 Safari 不支持 transition 宽度动画
IE10+ 支持 transition，但只认带前缀的 -ms-transition；Safari 6.1–9 需要 -webkit-transition，且不支持对 width 的过渡（尤其是从 0 开始）。
兼容方案不是加前缀，而是换属性：
- 用
transform: scaleX(n)+transform-origin: left，所有现代浏览器及 IE9+ 均支持 - 避免从
0过渡到目标值，改用0.001起始（IE 对 0→X 的 width 过渡常失效） - 若必须用 width，检查是否启用了
backface-visibility: hidden，某些旧 WebKit 版本下它会破坏过渡
滑块拖拽结束后遮罩停在错误位置
松手瞬间 mouseup/touchend 的坐标和当前滑块位置不同步，尤其快速拖拽后，事件延迟导致最终宽度计算偏移。
解决思路是：不依赖事件坐标，改用元素自身状态校准：
- 记录拖拽开始时的
mask.offsetWidth和鼠标/触摸点相对滑块左边缘的偏移量startX - 每次移动时，新宽度 = 初始宽度 + 当前指针位置 − 起始指针位置
- 松手后立刻用
getBoundingClientRect()读取滑块容器宽度，把遮罩宽度 clamp 在0到该值之间，避免超界 - 别用
clientX - container.getBoundingClientRect().left算位置，滚动页面时这个值不准
CSS 过渡本身很简单，难的是让 width 变化在各种设备、各种触发方式下都稳住节奏。最常被忽略的，是把「视觉反馈」和「状态同步」当成一回事——它们得各自独立处理，再小心缝合。
