为什么 @keyframes 动画不适用于 Vue.js？答案

【问题标题】：Why are @keyframes animations not working with Vue.js?为什么 @keyframes 动画不适用于 Vue.js？
【发布时间】：2019-10-11 20:43:29
【问题描述】：

我正在尝试在用户加载网站时使链接闪烁。但是，动画在 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 未加载时有效。

【问题讨论】：

Vue 不会阻止关键帧/动画。你声明了isFlashing吗？也许在没有条件类的情况下试试这个？
我已经在没有条件类的情况下尝试过了。它也没有工作。所以你看不出代码本身有什么错误？

标签： css vue.js css-animations

【解决方案1】：

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

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

【讨论】：