在动画运行时禁用过渡

Question

<div class="test" id="test">Test text</div>

.test {
  position: relative;
  top: 0px;
  border: 1px solid #ccc;
  animation: test 5s;
  transition: top 1s;
}

@keyframes test {
  0% {
    opacity: 0;
    transition: none;
  }
  100% {
    opacity: 1;
    transition: none;
  }
}

const test = document.getElementById('test');
setTimeout(() => {
    test.style.top = "100px"
}, 1000);

我预计如果 top 属性的值被 JS 更改，转换 transition: top 1000ms 不会发生，因为 transition: none 提供 @keyframes test ，但实际上，转变发生了。我无法理解为什么 keyframes 中的 transition 值不会覆盖 transition.

的任何现有定义

Answer 1

让我们再举一个例子 display:

.test {
  position: relative;
  top: 0px;
  border: 1px solid #ccc;
  animation: test 5s forwards;
}

@keyframes test {
  0% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: none;
  }
}

<div class="test" id="test">
  Test text
</div>

我们逻辑上希望永远不会看到该元素，因为我们设置了 display:none 并且我们将动画设置为 forwards 但显示被简单地忽略了，因为 它不能被动画化。与 transition 相同的逻辑，因为它是一个属性，我们无法设置动画 ^ref.

基本上，任何无法设置动画的属性在与关键帧一起使用时都会被忽略。

Properties that aren't specified in every keyframe are interpolated if possible — properties that can't be interpolated are dropped from the animation. ^ref

在动画运行时禁用过渡

Disable a transition while an animation is running

css

css-transitions

css-animations

在动画 运行 时禁用过渡

Disable a transition while an animation is running

css

css-transitions

css-animations

在动画运行时禁用过渡