如何从 JS 触发 CSS 动画？答案

【问题标题】：How to trigger a CSS animation from JS?如何从 JS 触发 CSS 动画？
【发布时间】：2020-07-24 23:19:04
【问题描述】：

我有一个气球，当它悬停时，会展开 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 个气球）。

【问题讨论】：

这能回答你的问题吗？ Trigger CSS Animations in JavaScript

标签： javascript css css-animations

【解决方案1】：

这是一个解决方案，它使气球一个一个地隐藏起来，它们之间的间隔为 0.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>

【讨论】：

【解决方案2】：

您可以使用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>

【讨论】：