css 闪烁特效求助

V2EX = way to explore

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

For Existing Member Sign In

This topic created in 1903 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 更简洁清晰易懂。