css 闪烁特效求助

資深大佬 : LeeReamond 1

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)

資深大佬 : wunonglin

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

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

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

“`

資深大佬 : temporary

奇奇怪怪，用 animation 方便点

資深大佬 : wunonglin

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

資深大佬 : cyrbuzz

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

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