有没有可靠的方法来检测给定元素及其子元素的所有动画何时完成？

Question

声明CSS动画时,元素将触发animationStart和animationStartEnd事件.

有没有办法在以下情况下触发javascript函数:

1. 所有动画都已完成,包括儿童动画.
2. 没有声明动画,也没有必要等待.

这是我目前的方法:http: //codepen.io/miguel-perez/pen/CDcAG

var
/**
 * Fires a custom event when all animations are complete
 * @param   {object}    $element - jQuery object that should trigger event
 * 
 */
 triggerAllAnimationEndEvent = function ($element) {
    var animationCount      = 0,
        animationstart      = "animationstart webkitAnimationStart oanimationstart MSAnimationStart",
        animationend        = "animationend webkitAnimationEnd oanimationend MSAnimationEnd",
        eventname           = "allanimationend",
        unbindHandlers      = function(e){
            $element.trigger(eventname);
            // utility.redraw($element);
            console.log(eventname);
        },
        onAnimationStart    = function (e) {
            if ($(e.target).is($element)) {
                e.stopPropagation();
                animationCount ++;
            }
        },
        onAnimationEnd      = function (e) {
            if ($(e.target).is($element)) {
                e.stopPropagation();
                animationCount --;
                if(animationCount === 0) {
                    unbindHandlers();
                }
            }
        };

    $element.on(animationstart, onAnimationStart);
    $element.on(animationend, onAnimationEnd);
},

/**
 * Fires a custom callback when all animations are finished
 * @param   {object}    $element - jQuery object that should trigger event
 * @param   {function}  callback - function to run
 * 
 */
triggerCallback = function ($element, callback) {
    $element.one("allanimationend", callback);

    // Fires fake animation events in case no animations are used
    setTimeout(function(){
        $element.trigger("animationstart");
        $element.trigger("animationend");
    }, 100); // wait a bit
},
$elements = $('.element');



$elements.each(function(i){
  var $this = $(this);
  triggerAllAnimationEndEvent($this);
  triggerCallback($this, function(){
    $this.text((i + 1) + " DONE!");
  });
});

这种方法受setTimeout的限制.如果未在元素上声明动画,或者动画的延迟高于超时,则会在错误的时间触发调用.

Answer 1

据我所知，没有现成的蛋糕可以告诉你这一点。但是开发分类JavaScript和CSS代码你可以做到这一点。我不知道你的代码。所以从现在起你就可以自己做主了，但我想告诉你几点：

\n\n

\n
• 通过使用 JavaScript/jQuery 触发事件，同时为它们触发的效果保留 CSS3，将逻辑与效果分开。
\n
• 用于transitionend检测转换何时结束，允许在不允许回调的 jQuery 方法上执行类似回调的行为。
\n
• 如果动画由 JavaScript 操作，则根据您的代码在脚本函数或循环末尾触发操作。
\n
• animationend对于 CSS3 关键帧动画以相同的方式使用。
\n

\n\n

但总之你必须在你自己编写的动画上做到这一点。

\n\n

参考

\n\n

MDN 上的转换结束

\n\n

MDN 上的动画结束

\n