javascript - 检测链式动画集的 "animationend"事件

Question

这是我的CSS，其中三个关键帧绑定(bind)在一起做一个链式动画

#anim-div{
    -webkit-animation-name    : mpbar-anim-page1, mpbar-anim-page2, mpbar-anim-page3;
    animation-name            : mpbar-anim-page1, mpbar-anim-page2, mpbar-anim-page3;
    -webkit-animation-delay   : 0s, 0.7s, 1.4s;
    animation-delay           : 0s, 0.7s, 1.4s;
    -webkit-animation-duration: 0.7s;
    animation-duration        : 0.7s;
}

是否可以检测整个集合的animationend事件？
当我尝试时，它会检测每个关键帧的 animationend(最终触发 3 个事件)

Answer 1

假设动画的数量未知，最终动画的名称也未知，您可以使用 getComputedStyle 来实现。将动画读入数组。然后，当 animationend 事件触发时，递增一个变量并在该变量的值等于数组长度时执行您希望的代码，如下所示:

var div=document.querySelector("div"),
    style=window.getComputedStyle(div),
    animation=style.getPropertyValue("animation-name")||style.getPropertyValue("-moz-animation-name")||style.getPropertyValue("-webkit-animation-name"),
//  Delete unneeded prefixed properties above 
    count=animation?animation.split(",").length:0,
    ended=0;
div.addEventListener("animationend",function(){
  ended++;
  if(ended===count){
//  Your code here
    console.log(ended+" animations completed.");
  }
},0);

div{
  animation:x 1s ease-in-out,y 1s ease-in-out 1s,z 1s ease-in-out 2s;
  background:#000;
  height:50px;
  width:50px;
}
@keyframes x{to{transform:rotatex(180deg);}}
@keyframes y{to{transform:rotatey(180deg);}}
@keyframes z{to{transform:rotatez(180deg);}}
/* Housekeeping */
body,html{height:100%;}
body{align-items:center;display:flex;justify-content:center;}

<div></div>