转换期间转换属性发生变化的 CSS 转换答案

【问题标题】：css transitions with change in transition property during transition转换期间转换属性发生变化的 CSS 转换
【发布时间】：2021-05-14 03:13:25
【问题描述】：

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

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

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

【问题讨论】：

你有没有尝试过了解自己？
我有，在我看来，它没有完成到结束。但我正在寻找这种行为的原因，以及它是否在规范中提到或者它是特定于浏览器的。
您是否删除了声明转换的类，或者您是否将转换重置为 0 。这有很大的不同，因为属性不能被删除，只能重置。
@G-Cyrillus 我切换到一个没有这种转换的类。
好的，删除类也会删除过渡持续时间，并将其设置回默认值 (0)。如果您添加另一个具有不同持续时间的类，它将重置它并重新启动它。您可能想要一个动画，而您可以停止它并重新启动它 (animation-play-state:running/paused) 。看看这篇文章css-tricks.com/…，你可能会在css-tricks.com/…找到你需要的东西

标签： css css-transitions

【解决方案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>

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

【讨论】：

因为我们在这里将 css 和 js 结合起来，这种行为是否有保证？
@user2599052 - 你打算如何在没有 JS 的情况下切换类和更改背景颜色？ CSS悬停，也许？我可能会很快创建第二个 sn-p 来验证这一点，但我想效果会是一样的，因为最终结果是删除了转换属性......
只有js。但这会保持一致
我想不出任何理由。