css转换过程中转换属性发生变化

Question

我有一个css转换，它在一个属性上运行5秒。如果我通过脚本将类更改为cls2来删除此持续时间内的转换(2秒后的sat(，它会影响正在运行的转换还是会运行到完成？

.cls1 {
transition : background-color 5s ease-in
}
.cls2 {
/*transition : background-color 5s ease-in*/
}

Answer 1

易于测试：

document.body.style.setProperty('--bg-color', 'red');
function changeColor() {
const varName = '--bg-color';
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo'];
const body = document.querySelector('body');
const currentColor = body.style.getPropertyValue(varName)
const currentColorIndex = colors.findIndex((color) => color === currentColor);
body.style.setProperty(varName, colors[currentColorIndex + 1 % colors.length]);
}
function changeClass() {
const target = document.querySelector('#target');
target.classList.toggle("cls1");
}

.cls1 {
transition : background-color 5s ease-in
}

<div id="target" class="cls1" style="height: 100vh; width: 100vw; background: var(--bg-color)">
<button onclick="changeColor()">Change Color</button>
<button onclick="changeClass()">Change Class</button>
</div>

因此，如果我们在过渡的中途删除过渡，过渡会突然停止，我们只得到新的背景色。这是有道理的——元素不再具有任何转换属性集。