我试图使一个链接闪光时,用户加载的网站。但是,动画在Vue中不起作用。
我在一个单独的文件中尝试了同样的代码,没有Vue,它工作得很好。
这是应该 Flink 的元素。("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%;
}
我以为链接会无限 Flink ,但什么也没发生。它只是保持白色。如前所述,动画在未加载Vue时工作。
2条答案
按热度按时间ki0zmccv1#
在
h2
样式中:color: white;
将覆盖动画颜色规则。从
h2
样式中删除color: white;
,或者将类flash
添加到h2
元素中,而不是a
元素。e0bqpujr2#
今天也有同样的问题。问题是解析.vue文件中的“style scoped”和“style”标签不支持包含%的关键帧。
一个“黑客”的解决方法是在你的模板中包含一个样式标签,只包含那些@keyframe行的css。
这样你就避免了css需要被解析(但是这样也有缺点,比如css也不会被缩小等),但是它确实又开始工作了。