jquery - 使用 jQuery 和 CSS 转换的脉动效果

Question

我正在尝试实现一种效果，当条件是我时，背景颜色会脉动。所以我有:

<div class="box">...</div>

.box {
    background-color: #fff;
    transition: background-color 0.5s ease-out;
}
.box.active {
    background-color: #ccc;
}

所以现在我想使用 jQuery 多次添加和删除该类，以创建背景颜色脉动效果。像这样的东西:

$('.box').addClass('active').delay(1000).removeClass('active').delay(1000).addClass('active');

理论上，这应该会产生脉动效果，但事实并非如此。发生的情况是添加了“事件”类，并且永远不会删除或再次添加。这几乎就像第一个“removeClass”从未被触发。

我遗漏了什么，但不确定是什么。也许这与 CSS 过渡时间有关，但它们应该相互独立，对吧？

感谢您的任何想法。

Answer 1

延迟仅适用于动画，不适用于添加和删除类。此外，您可以在 CSS 中使用关键帧进行脉动:

@keyframes pulse { 
  50% { background-color: #ccc }
}

.box {
  animation: pulse .5s ease-out 2;
}