直接用 style.setproperty() 改 --char-count 和 --duration 无法自动重播动画，因 css 动画不监听自定义属性变化；需强制重播：设 animation 为 none→触发重排→恢复动画，或切 animation-name、切 class；字符数计算推荐用 [...textcontent].length 避免 emoji 等误差；非等宽字体下慎用 ch，可改用 clip-path 或预设 --avg-width。
直接用 style.setProperty() 改 --char-count 和 --duration 就能动态控制打字机效果，但必须同步重播动画，否则变量变了动画不动。
为什么改了 CSS 变量动画却不更新
CSS 动画不会监听自定义属性变化自动重播；--char-count 改了，@keyframes 里 calc(var(--char-count) * 1ch) 虽然实时生效，但动画进度卡在原位置，视觉上“停住”或“跳变”。
- 浏览器只在动画声明首次计算时读取变量值，后续变量变更不触发重启动画
-
animation: type var(--duration) steps(var(--char-count), end)中的steps()参数虽响应变量，但播放状态不受影响 - 常见现象：文本突然全显、最后一字卡住、光标停在中间
强制重播动画的三种实操方式
核心是让浏览器认为“这是一个新动画”，从而丢弃旧状态、从头开始。
- 先移除
animation（设为none），再加回来 —— 最稳，兼容所有现代浏览器：el.style.animation = 'none';<br>el.offsetHeight; // 强制重排触发热刷新<br>el.style.animation = 'type var(--duration) steps(var(--char-count), end) forwards';
- 用
animation-name切换空动画名（如none→type），避免操作整个animation字符串 - 给元素加一个临时 class（如
.replay），在 CSS 中用.replay { animation: none; }+.replay.active { animation: type ...; }控制，靠 class 切换来重置
JS 动态计算字符数时的易错点
textContent.length 看似简单，但中英文混排、Emoji、零宽字符会悄悄破坏步数精度。
- 中文标点（，。！？）算 1 字符，但某些字体下宽度 ≠ 1ch，需配
font-family: monospace或Fira Code - Emoji 如 ?? 是多个 Unicode 码点拼接，
textContent.length返回 5+，但视觉上只占 1–2 个字符位，建议实测后硬编码--char-count - 空格、换行符、
innerText会过滤掉它们，导致steps()步数不足 - 推荐写法：
const text = el.textContent;<br>const charCount = [...text].length; // 拆解为 Unicode 字符，比 textContent.length 更准
ch 单位在非等宽字体下的 fallback 方案
当必须用 font-family: 'PingFang SC', sans-serif 这类比例字体时，1ch 不等于一个汉字宽度，width: calc(var(--char-count) * 1ch) 会偏移。
- 不要强行用
ch，改用clip-path: inset(0 100% 0 0)+animation动态缩进右边界，它不依赖字符宽度度量 - 若坚持用
width，可预先测出该字体下平均字符宽度（如 16px），用 JS 注入--avg-width: 16px，CSS 中写width: calc(var(--char-count) * var(--avg-width)) - 注意：Firefox 对连字（fi, fl）默认启用，会导致
ch值异常，加font-variant-ligatures: none关闭
真正难的不是写对第一行代码，而是每次文本变长、字体加载延迟、用户缩放页面时，--char-count 和重播时机是否还精准——这些细节不处理，效果上线就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
