你可能不知道的JS动画事件

平时在做业务中，我们会有一些 CSS 动画的需求，用的最频繁的应该是过渡 transition 或者 动画 animation。

如何在动画完成之后，做一些操作?

我们能通过setTimeout 延迟指定的动画时间 来执行回调操作。

上面的做法有一个问题是，在动画执行期间，如果有大量占用浏览器资源的其他高优先级任务，造成页面卡顿，动画实际的执行时间变长，导致回调函数执行时间有偏差。

那么 css 有没有提供类似的API呢？

接下来介绍两个关键的 JS 事件

1、transitionend

transitionend 事件会在 CSS transition 结束后触发。

基本用法如下：

element.addEventListener('transitionend', handler)

有两点需要注意：

1、如果监听元素有多个属性都有过渡动画， transitionEnd 会在多个属性完成后多次触发。

解决方法：通过 falg 控制回调函数执行次数。

2、如果监听元素的 children 也有过渡，也会在 children 的过渡完成后处触发。

解决方法：可以通过判断 e.target === element 判断是不是当前监听元素

2、animationend

element.addEventListener('animationend', handler)

有一点需要注意：

如果监听元素的 children 也有动画，也会在 children 的动画完成后处触发。

解决方法：可以通过判断 e.target === element 判断是不是当前监听元素

兼容性

不同的浏览器需要返回不同的前缀。下面贴上transition相关代码 (animation大同小异):

function whichTransitionEvent() {
    const el = document.createElement('container');
    const transitions = {
        transition: 'transitionend',
        OTransition: 'oTransitionEnd',
        MozTransition: 'transitionend',
        WebkitTransition: 'webkitTransitionEnd',
    };

    for (let t in transitions) {
        if (el.style[t] !== undefined) {
          return transitions[t];
        }
    }
}

const event = whichTransitionEvent();
event && element.addEventListener(event, handler);

浏览器兼容情况 可以看到主流浏览器均已支持。

参考链接

transitionend
animationend