JS获取动画属性初始值而非当前值的问题及解决方法

问题原因 #

你混淆了自定义属性的作用目标：

• 你在document.documentElement（即<html>标签）上通过@property声明了--opacity，但CSS动画是应用在.count按钮元素上的。
• CSS动画运行时，只会修改按钮元素自身的--opacity值，<html>元素上的--opacity始终保持初始值9不变。
• 你的JS代码一直在读取<html>元素的属性，自然拿不到动画中的动态值。

修复方案 #

修改JS代码，读取按钮元素本身的计算样式，而非<html>元素：

function getAnimState() {
  const btn = document.getElementById("count");
  btn.innerHTML = getComputedStyle(btn).getPropertyValue("--opacity");
}

CSS和HTML无需改动，点击按钮即可获取动画运行时--opacity的当前值。

其他替代方法 #

如果最终目的是获取元素透明度，可直接读取浏览器计算后的opacity属性（无需依赖自定义属性）：

function getAnimState() {
  const btn = document.getElementById("count");
  const currentOpacity = parseFloat(getComputedStyle(btn).opacity) * 100;
  btn.innerHTML = Math.round(currentOpacity); // 取整显示
}

这种方法跳过自定义属性，直接拿到最终透明度的百分比数值，同样能满足需求。

内容的提问来源于stack exchange，提问作者Chlebqowy