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

Question

我正在看这段代码http://codepen.io/optyler/pen/FgDyr ，如果将鼠标悬停在三角形元素上，将会看到动画。 但是，我不想将其悬停，而是要使用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元素也需要动画。

Answer 2

在您的CSS中添加

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

很快，您就可以通过将颜色从rgba更改为rgb或纯色，来避免三个元素的交点变得比其成分更暗，

$font_color: rgb(231,236,241);