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

Question

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

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

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

我们正在构建Webkit浏览器,特别是Mobile Safari.

谢谢!

Answer 1

对于简单的事件触发器，您可以将一个函数传递给 jQuery 的trigger()方法，并使用该函数的返回值来调用特定事件的触​​发器（然后可以监听该事件：

\n\n

function animEndTrigger(e) {\n    if (!e) {\n        return false;\n    }\n    else {\n        var animName = e.originalEvent.animationName;\n        return animName + \'FunctionTrigger\';\n    }\n}\n\n$(\'body\').on(\'bgAnimFunctionTrigger fontSizeFunctionTrigger\', function(e){\n    console.log(e);\n});\n\n$(\'div\').on(\'webkitAnimationEnd\', function(e) {\n    $(this).trigger(animEndTrigger(e));\n});\n

\n\n

JS 小提琴演示。

\n\n

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

\n\n

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

\n\n

var animations = {\n    \'bgAnim\': \'aParticularEvent\'\n};\n\nfunction animEndTrigger(e) {\n    if (!e) {\n        return false;\n    }\n    else {\n        var animName = e.originalEvent.animationName;\n        return animations[animName] ? animations[animName] : false;\n    }\n}\n\n$(\'body\').on(\'aParticularEvent\', function(e) {\n    console.log(e);\n});\n\n$(\'div\').on(\'webkitAnimationEnd\', function(e) {\n    $(this).trigger(animEndTrigger(e));\n});\xe2\x80\x8b\n

\n\n

JS 小提琴演示。

\n\n

不过，在这种情况下，return false应该进行更改，以免提供错误Uncaught TypeError: Object false has no method \'indexOf\'（到目前为止，我还没有费心去解释）。

\n\n

下面的代码会导致被调用函数 ( animEndTrigger()) 直接调用trigger()自定义事件（这需要一个元素来绑定该trigger()方法），并且还避免了Uncaught TypeError上述情况：

\n\n

var animations = {\n    \'bgAnim\': \'aParticularEvent\'\n};\n\nfunction animEndTrigger(e, el) {\n    if (!e || !el) {\n        return false;\n    }\n    else {\n        var animName = e.originalEvent.animationName;\n        if (animations[animName]) {\n            $(el).trigger(animations[animName]);\n        }\n    }\n}\n\n$(\'body\').on(\'aParticularEvent\', function(e) {\n    console.log(e);\n});\n\n$(\'div\').on(\'webkitAnimationEnd\', function(e) {\n    animEndTrigger(e, this);\n});\xe2\x80\x8b\n

\n\n

JS 小提琴演示。

\n\n

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

\n