使用jQuery或JavaScript绑定到自定义CSS动画结束事件？

我们针对同一个对象有多个动画.当每个动画结束时,我们需要采取不同的行动.

现在,我们绑定到webkitAnimationEnd事件,并使用gnarly if / then语句以不同方式处理每个动画.

有没有办法实质上创建自定义webkitAnimationEnd事件,允许我们在特定动画结束时触发特定的事件处理程序？例如,animation1结束时的fire handler1和animation2结束时的fire handler2.

我们正在构建Webkit浏览器,特别是Mobile 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 Fiddle demo.

当然,您也可以使用被调用函数来触发事件本身或评估传递的参数以确定是否要返回事件：

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

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 Fiddle demo.

虽然,在这种情况下,应该改变return false,以便不提供错误Uncaught TypeError：Object false没有方法’indexOf'(我还没有考虑到这一点).

下面导致被调用函数(animEndTrigger())直接触发()自定义事件(它需要一个绑定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) {
    animEndTrigger(e,this);
});​

JS Fiddle demo.

当然,你仍然有效地使用if进行评估,所以我不能特别确定这比你自己已经实现的解决方案更整洁.