css 闪烁特效求助

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1381 天前的主题，其中的信息可能已经有所发展或是发生改变。

vue 中想做一个简单的闪烁动画，写了如下代码但是无法实现效果，请问可能是什么原因导致的？

大概就是一行文字想让他每秒钟闪烁一下，然后 window 上绑了一个循环函数。但是最后显示出来效果，它确实每秒间隔会闪烁，但我想让他有逐渐变成透明这种动画效果，实际没有显示出来，可能是什么原因导致的？

<template>
  <div class="flashing" refs="flashing">
    I'm the flashing text
  </div>
</template>

export default {
  mounted(){
    window.setInterval(()=>{
      if (this.$refs.flashing.style.opacity == "0"){
        this.$refs.flashing.style.opacity = "1"
      } else {
       	this.$refs.flashing.style.opacity = "0"
      }
    },1000)
  }
}

<style scope>
.flashing{
  transition:all 0.5s linear;
}
</style>

4 条回复 • 2021-02-12 11:42:21 +08:00

wunonglin

2021-02-12 11:32:21 +08:00

你这为毛不直接用 css 的 animation ？

```css
. flashing{
animation: .3s linear 1s infinite op;
}

@keyframes op {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}

```

temporary

2021-02-12 11:32:22 +08:00 via iPhone

奇奇怪怪，用 animation 方便点

wunonglin

2021-02-12 11:32:49 +08:00

修正上面
@keyframes op {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}

cyrbuzz

2021-02-12 11:42:21 +08:00

transition 是一种从`有`到`有`的动画。所以你需要给.flashing 一个初始值 .flashing { opacity: 0 }。

另外直接写楼上的动画比用 JS 更简洁清晰易懂。