继承时的转换行为

Question

今天我发现嵌套元素使用inherit关键字时有趣的转换行为。如果没有继承，所有嵌套元素上的转换都会立即触发。而当继承时，转换是级联触发的。 （正如评论中提到的，这种行为是铬特有的）

无继承

const change = document.getElementById("change");
let toggler = true;
change.addEventListener("click", () => {
    toggler = !toggler;
    document.documentElement.style
    .setProperty('--color', toggler ? "black" : "red");
})

::root{
  --color: "black";
}

* {
  transition: color 1s;
  color: var(--color);
}

.test {
  color: inherit;
}

<div>
  Text level1
  <div>
    Text level2
    <div>
      Text level3
    </div>
  </div>
  <button id="change">
    ChangeColor
  </button>
</div>

继承

const change = document.getElementById("change");
let toggler = true;
change.addEventListener("click", () => {
toggler = !toggler;
    document.documentElement.style
    .setProperty('--color', toggler ? "black" : "red");
    
})

::root{
  --color: "black";
}

* {
  transition: color 1s;
  color: var(--color);
}

.test {
  color: inherit;
}

<div class="test">
  Text level1
  <div class="test">
    Text level2
    <div class="test">
      Text level3
    </div>
  </div>
  <button id="change">
    ChangeColor
  </button>
</div>

有没有办法即使使用继承也可以立即改变颜色？

Answer 1

这有点破解，但如果您需要解决方法并了解所有继承源，它确实有效。

首先，在

*

规则中，禁用

color

属性的转换：

* {
  transition: all 1s, color 0s;
}

然后，转到颜色更改的“源”并添加

.some-source-of-color {
   transition: color 1s;
}