javascript - 如何从JS触发CSS动画？

Question

我有一个气球，当它悬停时，它会膨胀并消失(类似弹出的动画)。我用 CSS 做了这个，但是当光标移动时，气球又回来了。我希望气球永远消失，直到我刷新页面，所以我猜它需要 onclick，但该选择器在 CSS 中不可用。

这是我在 CSS 中的内容

@keyframes pop
{
    from{
        opacity:1;
        transform: translateZ(0) scale(1,1);
    }

    to{
        opacity:0;
        transform: translateZ(0) scale(1.5,1.5);
    }
}

.balloon:hover
{
    animation: pop 0.5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}

我看到另一个问题说最接近的是 :active 但它需要按住鼠标。如果我想让它成为 onclick，我需要使用 Javascript。但我不知道需要写什么来触发动画。

是否也可以做到当我弹出 1 个气球时，所有其他气球也会自动弹出，中间有 1 秒的延迟？ (有 5 个气球)。

Answer 1

您可以使用 classList 通过 JS 添加和删除动画的类。

添加:

object.classList.add('balloon');

删除:

object.classList.remove('balloon');

工作示例:

const add = () => {
  document.getElementById('balloon').classList.add('animation')
}

const remove = () => {
  document.getElementById('balloon').classList.remove('animation')
}

@keyframes pop {
  from {
    opacity: 1;
    transform: translateZ(0) scale(1, 1);
  }
  to {
    opacity: 0;
    transform: translateZ(0) scale(1.5, 1.5);
  }
}

.animation {
  animation: pop 0.5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}

.balloon {
  height: 125px;
  width: 110px;
  background-color: #FF6B6B;
  border-radius: 50%;
}

.controls{
  position: absolute;
  bottom: 10px;
  right: 10px;
}

<div id="balloon" class="balloon" onmouseover="add()"></div>
<div class="controls">
  <button onClick="add()">Hide</button>
  <button onClick="remove()">Show</button>
</div>