为什么@keyframes动画不能用Vue.js?

jxct1oxe  于 2023-10-23  发布在  Vue.js
关注(0)|答案(2)|浏览(193)

我试图使一个链接闪光时,用户加载的网站。但是,动画在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时工作。

ki0zmccv

ki0zmccv1#

h2样式中:color: white;将覆盖动画颜色规则。
h2样式中删除color: white;,或者将类flash添加到h2元素中,而不是a元素。

e0bqpujr

e0bqpujr2#

今天也有同样的问题。问题是解析.vue文件中的“style scoped”和“style”标签不支持包含%的关键帧。
一个“黑客”的解决方法是在你的模板中包含一个样式标签,只包含那些@keyframe行的css。

<template>
  <link rel="stylesheet" href="./src/assets/keyframe_animation.css"/>

  your other template html here
</template>

<style scoped>
regular/other css here
</style>

这样你就避免了css需要被解析(但是这样也有缺点,比如css也不会被缩小等),但是它确实又开始工作了。

相关问题