Question

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

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

所有动画都已完成，包括儿童动画。
没有声明动画，也没有必要等待。

这是我目前的做法： 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代码可以做到这一点。我不知道你的代码。所以从现在开始你就是自己的，但我会给你留下几点：

使用JavaScript / jQuery触发事件，同时为触发的效果保留CSS3，从而使逻辑与效果分离。
使用transitionend检测转换何时结束，允许对不允许回调的jQuery方法执行类似回调的行为。
如果动画由JavaScript操纵，则在脚本函数或循环结束时触发操作，具体取决于您的代码。
以与CSS3关键帧动画相同的方式使用animationend。

但总之，你必须自己编写动画。

<强>参考

transitionend on MDN

animationend on MDN

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

1 个答案: