首次设置CSS变量--x时元素无过渡动画，后续点击正常？

示例代码 #

JavaScript #

let elem = document.querySelector(".e")
let but1 = document.querySelector(".but1")
let but2 = document.querySelector(".but2")
but1.addEventListener("click", () => {
  elem.style.setProperty("--x", `300px`)
})
but2.addEventListener("click", () => {
  elem.style.setProperty("--x", `500px`)
})

CSS #

.e {
  top: 50px;
  left: calc(var(--x));
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: black;
  transition: 2000ms ease-in-out;
}

HTML #

<div class="e">2</div>
<button class="but1">click me</button>
<button class="but2">click me</button>

问题现象 #

点击but1时，变量--x被设置为300px，元素会移动到对应位置，但无过渡动画效果；后续点击but1或but2时，过渡动画正常显示。

原因解析 #

核心问题出在CSS变量--x的初始状态：

• 页面加载时，--x未被定义，left: calc(var(--x))会被浏览器解析为无效值，此时浏览器会给left设置默认有效状态（对于绝对定位元素，left默认值为auto，视觉上等价于left: 0px）。
• 第一次点击but1时，是从left: auto（无效值对应的默认状态）直接切换到left: 300px，而CSS过渡要求前后两个状态都是明确的、可过渡的数值类型，初始的无效状态不满足这个条件，所以无法触发过渡动画。
• 后续点击时，--x已经有了明确的有效值（300px），此时切换到500px或切回300px，都是明确数值之间的变化，符合过渡触发条件，动画就能正常显示。

解决方法 #

给--x设置初始有效值，在.e的CSS规则中添加变量定义：

.e {
  --x: 0px; /* 添加初始值 */
  top: 50px;
  left: calc(var(--x));
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: black;
  transition: 2000ms ease-in-out;
}

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