README

传统的 js 可以通过回调函数判断动画是否结束；即使是采用 CSS 技术生成动画效果，JavaScript 仍然能捕获动画或变换的结束事件；

transitionend 事件和 animationend 事件标准的浏览器事件，但在 WebKit 浏览器里你仍然需要使用 webkit 前缀，所以，我们不得不根据各种浏览器分别检测事件

const transitions = {
  transition: "transitionend",
  OTransition: "oTransitionEnd",
  MozTransition: "transitionend",
  WebkitTransition: "webkitTransitionEnd",
};

源代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>suface js判断css动画是否结束</title>
  </head>

  <body>
    <p>一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持。<br /></p>
    <style type="text/css">
      .sample {
        width: 200px;
        height: 200px;
        border: 1px solid green;
        background: lightgreen;
        opacity: 1;
        margin-bottom: 20px;
        transition-property: opacity;
        /*transition-duration: .5s;*/
        transition-duration: 3s;
      }
      .sample.hide {
        opacity: 0;
      }
    </style>
    <div class="sample">css3动画过度慢慢隐藏（transition-duration:3s;）</div>
    <p>
      <button onclick="this.style.display='none';startFade();">
        慢慢消退，检测结束事件
      </button>
    </p>
    <script>
      (function () {
        var e = document.getElementsByClassName("sample")[0];
        function whichTransitionEvent() {
          var t,
            el = document.createElement("surface"),
            transitions = {
              transition: "transitionend",
              OTransition: "oTransitionEnd",
              MozTransition: "transitionend",
              WebkitTransition: "webkitTransitionEnd",
            };

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

        var transitionEvent = whichTransitionEvent();
        transitionEvent &&
          e.addEventListener(transitionEvent, function () {
            alert("css3运动结束！我是回调函数，没有使用第三方类库！");
            e.removeEventListener(transitionEvent, arguments.callee, false); //销毁事件
          });

        startFade = function () {
          e.className += " hide";
        };
      })();
    </script>
  </body>
</html>
<br /><br />//兼容性 详情

参考​

参考