如何使用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);