css 闪烁特效求助

V2EX = way to explore

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

For Existing Member Sign In

This topic created in 1900 days ago, the information mentioned may be changed or developed.

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 replies • 2021-02-12 11:42:21 +08:00

shakaraka

PRO

Feb 12, 2021

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

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

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

```

temporary

Feb 12, 2021 via iPhone

奇奇怪怪，用 animation 方便点

shakaraka

PRO

Feb 12, 2021

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

cyrbuzz

Feb 12, 2021

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

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