使用 t 时动态 CSS 计数器崩溃，我使用的是“@property”还是“counter”错误？

如何解决使用 t 时动态 CSS 计数器崩溃，我使用的是“@property”还是“counter”错误？

我正在创建一个显示我的 CPU 和 GPU 负载的仪表板。这是一个每 5 秒刷新一次的数字，因此跳跃非常突然；比如 0% -> 50%。

我在谷歌上搜索了这个跳跃的动画，所以它实际上计数了 0 -> 1 -> .. -> 50 等等。下面的代码实际上完美无缺。 {{ itemValue('gpu_load') }} 每 5 秒改变一次。

<style>
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.test {
  transition: --num 4s;
  counter-reset: num var(--num);
  --num: {{ itemValue('gpu_load') }};
}
    
.test::after {
  content: counter(num);
}
  
</style>  
<div class="test"></div>

无论如何；这只是一个柜台。我想做两个。我以为我可以复制上面的内容，然后在所有内容中添加“2”，如下所示：

<style>
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.test {
  transition: --num 4s;
  counter-reset: num var(--num);
  --num: {{ itemValue('goliath_system_gpu_load') }}
}
    
.test::after {
  content: counter(num);
}

@property --num2 {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.test2 {
  transition: --num2 4s;
  counter-reset: num2 var(--num2);
  --num2: {{ itemValue('goliath_system_cpu_load') }}
}
    
.test2::after {
  content: counter(num2);
} 
</style>  
<div class="test"></div>
<div class="test2"></div>

所以这也有效，但只是暂时的。每当我显示此代码时，浏览器（似乎）都会随机崩溃并显示“错误代码：STATUS_ACCESS_VIOLATION”。

我似乎无法弄清楚是什么原因造成的。我可能用错了什么？

解决方法

您不需要复制 CSS 自定义属性。你可以这样做：

@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
.main {
  transition: --num 4s;
}

.test {
  counter-reset: num var(--num);
  --num: {{ itemValue('goliath_system_gpu_load') }}
}

.test::after {
  content: counter(num);
}

.test2 {
  counter-reset: num2 var(--num);
  --num: {{ itemValue('goliath_system_cpu_load') }}
}
    
.test2::after {
  content: counter(num2);
} 

<div class="test  main"></div>
<div class="test2 main"></div>