绑定到自定义CSS动画结束事件与jQuery或JavaScript？(Bind to custom

我们有针对同一对象的多个动画。我们需要在每一个动画的最终采取不同的行动。

现在，我们绑定到webkitAnimationEnd事件，并使用粗糙的if / then语句以不同的方式处理每一个动画。

有没有一种方法基本上创建自定义webkitAnimationEnd事件，使我们能够触发一个特定的事件处理程序，具体的动画结束？例如，火handler1当动画1部和消防handler2时animation2结束。

我们正在建设的WebKit浏览器，特别是移动Safari浏览器。

谢谢！

对于简单的事件触发，你可以通过一个函数来jQuery的trigger()方法，并使用该函数的返回值调用触发特定事件（然后可以收听了：

function animEndTrigger(e) {
    if (!e) {
        return false;
    }
    else {
        var animName = e.originalEvent.animationName;
        return animName + 'FunctionTrigger';
    }
}

$('body').on('bgAnimFunctionTrigger fontSizeFunctionTrigger', function(e){
    console.log(e);
});

$('div').on('webkitAnimationEnd', function(e) {
    $(this).trigger(animEndTrigger(e));
});

JS提琴演示。

你可以，当然，也可以使用被调用函数要么触发事件本身或评估传递的参数以确定是否在所有返回的事件：

以评估一个特定的事件来触发的一种方法是使用一个对象：

var animations = {
    'bgAnim': 'aParticularEvent'
};

function animEndTrigger(e) {
    if (!e) {
        return false;
    }
    else {
        var animName = e.originalEvent.animationName;
        return animations[animName] ? animations[animName] : false;
    }
}

$('body').on('aParticularEvent', function(e) {
    console.log(e);
});

$('div').on('webkitAnimationEnd', function(e) {
    $(this).trigger(animEndTrigger(e));
});

JS提琴演示。

然而，在这种情况下， return false应该改变，从而不提供错误Uncaught TypeError: Object false has no method 'indexOf' （我已经不是困扰，到目前为止，还考虑到）。

下面使被叫功能（ animEndTrigger()来直接trigger()的自定义事件（它需要在其上的结合的元件trigger()方法），并且还避免了Uncaught TypeError以上：

var animations = {
    'bgAnim': 'aParticularEvent'
};

function animEndTrigger(e, el) {
    if (!e || !el) {
        return false;
    }
    else {
        var animName = e.originalEvent.animationName;
        if (animations[animName]) {
            $(el).trigger(animations[animName]);
        }
    }
}

$('body').on('aParticularEvent', function(e) {
    console.log(e);
});

$('div').on('webkitAnimationEnd', function(e) {
    animEndTrigger(e, this);
});

JS提琴演示。

当然，你还，有效，使用if执行评估，所以我不能特别肯定这是任何比你自己已经实施的解决方案更加整齐。