css - 动画运行时禁用过渡

Question

问题演示:https://jsfiddle.net/t0qsek8n/1/

<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