如何在JS中触发CSS动画？

Question

我有一个气球，当它悬停时，会展开n消失(一个类似弹出的动画)。这是我用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>

​

Answer 2

这是一个解决方案，它使气球一个接一个地隐藏，其间有.5s间隔

​

var balloons = document.getElementsByClassName('balloon');
[...balloons].forEach( (e, i)=>{
  e.onmouseover = function() {
    this.classList.add('hidden');
    setTimeout(hideAll, 500, balloons);
    }
});
function hideAll(arg){
    [...arg].forEach( (e, i)=>{
      if ( ! e.classList.contains('hidden') ) {
        e.style.animationDelay = i+'s';
        e.classList.add('hidden');
      }
    });
}

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

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

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

<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>

​