为什么@keyframes动画不能与Vue.js一起使用？
为什么@keyframes动画不能与Vue.js一起使用？
提问于 2019-05-25 23:40:04
我试图使一个链接闪光时，用户加载的网站。但是，动画在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时，动画会起作用。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-26 00:49:01
在h2样式中：color: white;将覆盖动画颜色规则。
从h2样式中删除color: white;，或者将类flash添加到h2元素中，而不是a元素中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56306314
复制相关文章
相似问题