css - 为什么 @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; 将覆盖动画颜色规则。

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