javascript - 如何使用 JavaScript 以编程方式为元素设置动画？

Question

我正在查看这段代码 http://codepen.io/optyler/pen/FgDyr如果将鼠标悬停在三 Angular 形元素上，您将看到动画。但是，我不想将其悬停，而是想使用 JavaScript 以编程方式进行。这是我到目前为止所做的:

document.querySelector('.triangle').classList.add('animateSpeak');

并添加了一个新的CSS类

.animateSpeak {
    animation: vibrate .5s infinite ease-out;
}

正如您在此处看到的那样，动画正在运行 http://imgur.com/a/V9JyO左边的部分只是动画。我在这里做错了什么吗？

Answer 1

由于您使用的是 CSS 3 动画，您可能需要某种 active 类。

只需将 :hover 选择器(第 54 行)更改为 .active 即可。即:

.triangle.active,
.triangle.active:before,
.triangle.active:after {
  animation: vibrate .5s infinite ease-out;
}

您可以通过添加 .active 类以编程方式启动动画或停止它删除类。

要回答你的第二个问题，看起来 :before 和 :after 元素也需要动画。