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

Question

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

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

有没有办法从本质上创建自定义webkitAnimationEnd事件，允许我们在特定动画结束时触发特定事件处理程序？例如，animation1 结束时触发handler1 ， animation2结束时触发handler2。

我们正在为 Webkit 浏览器构建，特别是 Mobile Safari。

谢谢！

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 小提琴演示。

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

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

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 小提琴演示。

当然，您仍然有效地使用 anif来执行评估，所以我不能特别确定这是否比您自己已经实现的解决方案更整洁。