按钮文字滑动切换不能直接改textcontent加transition，因文字长度变化导致浏览器无法计算位移起点终点；应使用ch单位、data-state控制、visibility+pointer-events禁用、精准transitionend监听及扁平dom结构。
按钮文字滑动切换为什么不能直接改textContent
直接用textContent替换文字再加transition: all，浏览器无法计算位移起点和终点——因为文字长度变了，行高、字体渲染宽度都可能浮动，transform没有锚点可依。结果就是跳变、卡顿，或 Safari 上文字错位。
- 文字必须用空格分隔（如“开始 运行中 完成”），不能换行或用
display: inline-block，否则ch单位偏移量会失准 - 推荐用
ch单位算滑动距离：单字宽 × 字数 × 1.2～1.4，比px或em更稳定 -
button内部只放一个span，不要嵌套div或设position: relative，避免创建额外层叠上下文导致transform偏移
data-state控制动画比class切换更可靠
用data-state="idle"这类属性配合 CSS 属性选择器，而不是靠 JS 频繁增删class，能避免状态不同步、重复点击失灵、动画中断后残留样式等问题。
- JS 只负责更新
dataset.state，例如btn.dataset.state = 'running' - CSS 里写
[data-state="idle"] span { transform: translateX(0); }，完全解耦逻辑与表现 - 如果按钮被快速连点，
data-state仍能准确反映当前阶段，而 class 切换可能因异步队列错乱
visibility + pointer-events 比 display: none 更适合按钮禁用态
按钮处于“不可用但需保留占位”时（比如加载中），用display: none会触发重排，且焦点状态丢失；而visibility: hidden保持盒模型，只跳过绘制。
- 搭配
pointer-events: none屏蔽鼠标交互，比单纯disabled属性更可控（disabled不支持自定义样式） - 若需过渡效果，给按钮加
transition: opacity 0.15s ease，再配合opacity: 0.6视觉降权 - 注意
visibility会继承，子元素（如图标svg）要显式设visibility: visible，否则一起消失
按钮动画卡顿常因 will-change 使用不当
will-change: transform不是万能加速键——滥用反而增加内存开销，甚至在低端设备上引发合成层爆炸。
- 只对真正高频动画的按钮加
will-change: transform, opacity，且仅在动画触发前动态添加，结束后立刻移除 - 避免全局写
button { will-change: transform; }，这会让所有按钮提前升层，拖慢初始渲染 - 动画结束监听用
transitionend而非setTimeout，确保时机精准：btn.addEventListener('transitionend', handler, { once: true })
data-state与 CSS 的严格一一映射——多一个空格、少一个ch偏移、状态没清空，都会让滑动错一帧。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
