Vue点击动画实现：无需手动调用setTimeout实现Div点击闪烁效果

嘿，刚好有个完美的解决方案——用CSS关键帧动画配合JavaScript触发，完全不用自己手动管理setTimeout，浏览器会帮你搞定动画的生命周期！

为什么不用setTimeout？ #

原来的方案需要手动设置两个定时器来添加/移除样式，不仅代码繁琐，还容易出现定时器未清理的问题。而CSS动画是由浏览器原生处理的，性能更优，也不用操心定时器的管理。

实现代码 #

HTML

<div id="myDiv">点击我试试闪烁效果！</div>

CSS

/* 定义闪烁的关键帧动画 */
@keyframes blink {
  0%, 100% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0; 
  }
}

/* 触发动画的类 */
.blink-animation {
  animation: blink 0.4s ease-in-out 3; 
  /* 参数说明：动画名称 | 单次时长 | 缓动效果 | 重复次数 */
}

JavaScript

const targetDiv = document.getElementById('myDiv');

// 点击时添加动画类
targetDiv.addEventListener('click', () => {
  targetDiv.classList.add('blink-animation');
});

// 动画结束后移除类，确保下次点击能重新触发
targetDiv.addEventListener('animationend', () => {
  targetDiv.classList.remove('blink-animation');
});

方案优势 #

• 完全摆脱手动setTimeout，代码更简洁易维护
• 动画的所有细节（时长、重复次数、缓动方式）都可以在CSS中灵活调整，比如想改成背景色闪烁，只需要修改@keyframes里的属性即可
• 浏览器对CSS动画有专门的优化，比JavaScript定时器实现的动画性能更好

扩展玩法 #

如果想要更复杂的闪烁效果，比如颜色变化+透明度变化，只需要修改关键帧：

@keyframes colorfulBlink {
  0%, 100% {
    opacity: 1;
    background-color: #fff;
  }
  50% {
    opacity: 0.6;
    background-color: #ff4444;
  }
}

内容的提问来源于stack exchange，提问作者nagy.zsolt.hun