0

今天，当嵌套元素使用继承关键字时，我发现了有趣的过渡行为。如果没有继承所有嵌套元素的转换，则会立即触发。而当继承转换时级联触发。（如评论中所述，此行为特定于铬）

无继承

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>

即使使用继承，有没有办法立即改变颜色？

4

0 回答 0