Блог

Я создаю панель мониторинга, которая отображает загрузку моего процессора и графического процессора. Это число обновляется каждые 5 секунд, и, следовательно, скачки очень внезапные; например, 0% -> 50%.

Я искал в Google, пытаясь анимировать этот переход, поэтому он действительно подсчитывается 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>