如何判断一个 css3 动画执行完毕

Question

需要在动画执行完毕后，执行一段 js 代码。如何才能判断一个 html 元素的动画执行完毕了呢

Answer 1

这个问题已经有人提出过了：https://segmentfault.com/q/10...

动画执行有事件的：

https://developer.mozilla.org...

• animationstart

• animationiteration

• animationcancel

• animationend

可以监听，但是需要使用正确的监听事件，浏览器兼容的话，可以使用前缀:

WebkitAnmationEnd 和 animationed

        var box = document.querySelector('#div');
        box.addEventListener("click", function () {
            this.className = 'change';
        }, false);
        box.addEventListener("webkitAnimationEnd", function () { //动画结束时事件 
            this.className = this.className.replace('change', ' ');
            console.log(2);
        }, false);