HTML动画结束后如何触发函数？

Question

这是我的CSS：

.animated {
 transition: 1s;
 left: -400px;
 }

我希望在将类名设置为.animated之后使用元素。在完成转换后，我想启动一个函数。有人可以建议我这个想法吗？

Answer 1

您可以使用transitionEnd事件，当CSS转换完成时会触发该事件：

function showMessage() {
    alert('Transition has finished');
}

var element = document.getElementById("animated");
element.addEventListener("transitionend", showMessage, false);

DEMO