纯CSS实现按钮文字滑动切换：用transform+overflow或clip-path配合data-state属性控制位移，JS仅更新状态，避免动画卡顿与不同步。
用 CSS 动画实现按钮文字滑动切换，不依赖 JS 更稳
纯 CSS 实现按钮文字滑动切换（比如“开始”→“运行中”→“完成”），关键不是靠 JS 控制 class 切换动画，而是用 @keyframes 配合 clip-path 或 transform + overflow 做视觉位移。JS 只负责触发状态变更（比如点击后加 data-state="running"），样式层完全解耦——这样避免动画卡顿、状态不同步、重复点击失灵等问题。
常见错误是直接对 textContent 做替换 + transition: all，但文字长度变化无法触发平滑过渡；也有人用两个 span 重叠 + opacity 交叉淡入淡出，但这不是“滑动”，且在 Safari 上常有渲染毛刺。
- 推荐方案：单个
button内含一个span，里面放多段文字（如开始运行中完成），用transform: translateX()移动容器，配合overflow: hidden截取可见区域 - 文字间距必须用空格或
display: inline-block，否则计算偏移量会错位 - 滑动距离 = 单字宽 × 字数 × 行高系数（通常取 1.2～1.4），建议用
ch单位（1ch ≈ 当前字体下“0”的宽度）更可靠
HTML 结构要扁平，避免嵌套干扰 transform
按钮内部结构越简单，CSS 动画越可控。不要用 div 包裹文字，也不要给文字容器设 position: relative 或 will-change——这些会创建新层叠上下文，导致 transform 在某些浏览器中失效或偏移不准。
正确结构示例：
立即学习“前端免费学习笔记（深入）”；
<button class="slide-btn" data-state="idle"> <span>开始 运行中 完成</span> </button>
注意： 是必须的，普通空格会被 HTML 压缩合并；data-state 用于 JS 控制阶段，CSS 通过属性选择器匹配动画起始位置：
[data-state="idle"] span { transform: translateX(0); }[data-state="running"] span { transform: translateX(-6ch); }[data-state="done"] span { transform: translateX(-12ch); }
JavaScript 只管状态流转，别碰动画逻辑
JS 的唯一任务是更新 data-state 属性值，其余交给 CSS。不要用 setTimeout 模拟“运行中”倒计时，也不要在 JS 里写 element.style.transform——这会覆盖 CSS 动画，且无法响应 :hover 等伪类。
实操建议：
- 用
dataset.state = "running"替代setAttribute("data-state", ...)，更语义化 - 状态切换前检查当前值，避免重复触发（例如用户连点两次“开始”，第二次应忽略）
- 如果需要异步完成（如请求返回后切到“完成”），在
fetch().then()里改状态，不要提前设 - 为防动画未结束就再次点击，可在 CSS 中加
transition: transform 0.3s ease-in-out，并在 JS 中监听transitionend事件做防抖（仅当需精确控制时）
移动端和 Safari 下的 clip-path 替代方案
用 transform + overflow 在 iOS Safari 15.4 以下存在文字模糊问题（尤其是 Retina 屏）。此时可改用 clip-path: inset(0 75% 0 0) 配合三段文字横向排列，通过改变右偏移量实现滑动效果——虽然兼容性略低（IE 不支持），但视觉更锐利。
对应 CSS 示例：
.slide-btn span {
display: inline-block;
width: 300%;
}
.slide-btn[data-state="idle"] span {
clip-path: inset(0 66.6% 0 0);
}
.slide-btn[data-state="running"] span {
clip-path: inset(0 33.3% 0 33.3%);
}
.slide-btn[data-state="done"] span {
clip-path: inset(0 0 0 66.6%);
}
注意：clip-path 的百分比基于元素自身宽高，所以必须固定 span 宽度为文字总宽的 3 倍（如 300%），且父容器 button 要设 overflow: hidden 防止裁剪外溢。
真正麻烦的是中英文混排时字宽不均——这时候别硬算 ch，老实用等宽字体（如 font-family: 'SF Mono', Consolas, monospace），或者把文字预渲染成 SVG 再做位移。
