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);

我希望如果JS更改了top属性的值，则不会发生过渡transition: top 1000ms，因为transition: none提供了@keyframes test，但实际上，过渡发生。我不明白为什么transition中的keyframes值不会覆盖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动画的属性。

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

如果可能的话，对未在每个关键帧中指定的属性进行插值-从动画中删除不能插值的属性。 ^ref

动画运行时禁用过渡

1 个答案: