为什么@keyframes动画不能与Vue.js一起使用？

Question

我正在尝试在用户加载网站时使链接闪烁。但是，该动画在Vue中不起作用。

我在单独的文件中尝试了没有Vue的相同代码，但效果很好。

这是应该闪烁的元素。 （类“ flash”出现在DOM中。看来这对我的JS来说不是问题）

<a href="/test/" :class="isFlashing ? 'flash' : ''">
  <h2>Test</h2>
</a>

CSS中的动画

.flash {
  -webkit-animation: flashing 0.5s infinite;
  animation: flashing 0.5s infinite;
}

@-webkit-keyframes flashing {
  0% {
    color: white;
  }
  50% {
    color: black;
  }
  100% {
    color: white;
  }
}

@keyframes flashing {
  0% {
    color: white;
  }
  50% {
    color: black;
  }
  100% {
    color: white;
  }
}

h2元素本身的样式：

h2 {
  position: absolute;
  top: 93%;

  color: white;

  margin-left: 7%;
}

我希望链接无限闪烁，但是什么也没发生。它只是保持白色。如前所述，动画在未加载Vue时起作用。

Answer 1

采用h2样式：color: white;将覆盖动画颜色规则。

从color: white;样式中删除h2，或将类flash添加到h2元素而不是a元素。