如何从JS触发CSS animation？

Question

我有一个气球，当它悬停时，会展开 n 消失（类似弹出的动画）。 我在 CSS 中做了这个，但是当 cursor 移动时，气球又回来了。 我希望气球永远消失，直到我刷新页面，所以我猜它需要是 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;
}

我看到另一个问题，说最接近的是：活动但需要按住鼠标。 如果我希望它是 onclick，我需要使用 Javascript。 但我不知道我需要写什么来触发 animation。

是否也有可能使当我弹出 1 个气球时，所有其他气球也会自动弹出，中间有 1 秒的延迟？ （有 5 个气球）。

Answer 1

您可以使用 classList 添加和删除 animation 的 animation 的classList 。

添加：

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>