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

Question

我们对同一对象有多种动画效果。在每个动画结束时，我们需要采取不同的操作。

目前，我们绑定到webkitAnimationEnd事件，并使用麻烦的if / then语句来处理每个动画的不同情况。

是否有一种方法可以创建自定义webkitAnimationEnd事件，使我们能够在特定动画结束时触发特定的事件处理程序？例如，当animation1结束时触发handler1，当animation2结束时触发handler2。

我们正在为Webkit浏览器构建，具体而言是Mobile Safari。

谢谢！

- Crashalot

Answer 1

对于一个简单的事件触发器，你可以将一个函数传递给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演示。

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

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

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示例。

这种情况下，应将return false修改为避免出现错误Uncaught TypeError: Object false has no method '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) {
    console.log(e);
});

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

JS Fiddle演示。

当然，你仍然有效地使用if来进行评估，所以我不能确定这比你已经实现的解决方案更整洁。

- David Thomas