Question

这是我的CSS，其中三个关键帧绑定在一起以制作链动画

#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

我们可以假设整个集合的 animationend事件实际上是最后结束的动画的 animationend 事件（在我们的例子中），第三部动画。）

因此，在绑定到元素的 animationend 事件中，我们需要检测刚刚结束的动画的名称，并检查它是否与第三个动画匹配。我们可以访问originalEvent对象并获取animationName属性。

请尝试以下代码：

$(document).ready(function(){

    $('#anim-div').on(animationEvent, function(e){
         var animationName = e.originalEvent.animationName;
         if (animationName == 'mpbar-anim-page3') {
             console.log('"' + animationName + '" animation has finished');
        }
    });

});

我已使用变量animationEvent来获取animationend事件的正确名称（某些浏览器可能需要带前缀的版本）。您需要将以下代码放在上面的代码之前：

function whichAnimationEvent(){
    var t,
        el = document.createElement("fakeelement");

    var animations = {
        "animation"      : "animationend",
        "OAnimation"     : "oAnimationEnd",
        "MozAnimation"   : "animationend",
        "WebkitAnimation": "webkitAnimationEnd"
    }

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

var animationEvent = whichAnimationEvent();

我还把完整的代码放在一个小提琴中：pointed to the source code。

在 Firefox ， Chrome 和 Opera 中进行测试。

Answer 2

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

＆＃13;

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);

＆＃13;

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;}

＆＃13;

<div></div>

＆＃13;

检测＆＃34; animationend＆＃34;链式动画集的事件

2 个答案: