transition 直接写在数字类自定义属性（如 --count）上无效，因 css 原生不支持其动画，需通过 @property 显式声明 syntax、inherits 和 initial-value 才可触发过渡。
为什么 transition 直接写在数字类属性上没反应
因为 CSS 原生不支持对普通自定义属性（比如 --count: 10）或非动画属性（如 content、font-size 的数值部分）做过渡。你写 transition: --count 0.5s; 完全无效——浏览器根本不认识这个属性是否可动画。
关键点在于：--count 必须先被声明为「受支持的动画属性」，才能参与 transition 或 @keyframes。这就要靠 @property。
-
@property是 CSS Houdini 的一部分，需现代浏览器支持（Chrome 100+、Edge 100+、Safari 16.4+；Firefox 尚未支持） - 它必须显式声明类型（
number）、语法（<number></number>）、是否继承、初始值 - 没加
@property，--count就只是个静态变量，不能触发任何过渡
怎么用 @property 注册一个可过渡的数字变量
注册必须放在 :root 或对应作用域内，且语法要严格匹配。常见错误是漏掉 syntax 或写错类型名。
@property --count {
syntax: '<number>';
inherits: false;
initial-value: 0;
}</number>
注意几个硬性要求：
-
syntax值必须用单引号包裹，且内容是 CSS 类型关键字（<number></number>、<length></length>、<percentage></percentage>），不能写成number或'number' -
initial-value必须与syntax类型一致，比如<number></number>对应0，<length></length>对应0px - 注册后，该变量才可在
transition中使用，例如：transition: --count 0.6s ease-out;
如何把变量值显示为页面上的动态数字
CSS 本身不能直接“渲染变量值”，得靠 content + 伪元素（::before / ::after）配合 counter-set 或 attr() ——但这些都不支持变量插值。真正可行的是：用 counter-reset 把变量转为计数器，再用 counter() 显示。
示例结构：
<div class="counter" style="--count: 88"></div>
对应 CSS：
.counter {
@property --count {
syntax: '<number>';
inherits: false;
initial-value: 0;
}
counter-reset: count var(--count);
transition: --count 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.counter::before {
content: counter(count);
}</number>
要点：
-
counter-reset: count var(--count)是关键桥梁——把 CSS 变量“注入”到计数器系统 -
counter(count)会实时读取当前计数器值，且因--count可过渡，计数器值也会平滑变化 - 不要试图用
content: var(--count)——这是非法语法，CSS 不允许content直接引用变量
实际触发增长时要注意什么
变量变化必须由 CSS 规则驱动（比如 hover、class 切换），不能靠 JS 直接改 style.setProperty 后就指望自动过渡——除非你同时用 JS 触发重排或利用 transition 的延迟机制。
- 推荐做法：JS 改 class，让 CSS 规则接管变量更新，例如：
el.classList.add('active')→.active { --count: 123; } - 如果必须用 JS 动态设值，记得加上
transition声明，且确保目标元素已注册@property（否则设了也白设） - Safari 16.4+ 才支持
@property，旧版 Safari 和所有 Firefox 用户会回退到静态数字，需准备降级方案（比如 JS + requestAnimationFrame）
最易被忽略的一点：@property 必须在 CSS 加载时就存在，不能动态插入 style 标签后补注册——浏览器不会重新解析已加载的样式表来识别新注册项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
