使用jQuery或JavaScript绑定到自定义CSS动画结束事件？ [英] Bind to custom CSS animation end event with jQuery or JavaScript?

问题描述

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

现在，我们绑定到 webkitAnimationEnd 事件，并使用gnarly if

有一种基本上创建自定义 webkitAnimationEnd 事件的方法，允许我们触发一个特定的事件处理程序当一个特定的动画结束？例如， animation1 结束时触发 handler1 ， animation2 结束时触发 handler2 。

我们正在为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 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））; 
} 
  

虽然，在这种情况下， return false 应该改变，以便不提供错误未捕获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）{
 console.log ）; 
}）; 
 
 $（'div'）。on（'webkitAnimationEnd'，function（e）{
 animEndTrigger（e，this）; 
}）; 
  

JS Fiddle演示。

当然，你仍然有效地使用 if 评估，所以我不能特别确定这是比你自己已经实施的解决方案更整齐。

We have multiple animations against the same object. We need to take different actions when each of these animations end.

Right now, we bind to the webkitAnimationEnd event, and use a gnarly if/then statement to handle each animation differently.

Is there a way to essentially create custom webkitAnimationEnd events, allowing us to fire a specific event handler when a specific animation ends? For instance, fire handler1 when animation1 ends and fire handler2 when animation2 ends.

We're building for Webkit browsers, specifically Mobile Safari.

Thanks!

解决方案

For a simple event-trigger, you can pass a function to jQuery's trigger() method and use the returned value of that function to call a trigger a specific event (which can then be listened-for:

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.

You can, of course, also use the called function to either trigger the event itself or assess the passed parameters to determine whether or not to return an event at all:

One method to assess for a particular event to trigger is to use an object:

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.

Though, in this case, the return false should be altered so as not to provide the error Uncaught TypeError: Object false has no method 'indexOf' (which I've not bothered, as yet, to account for).

The following causes the called-function (animEndTrigger()) to directly trigger() the custom event (which requires an element on which to bind the trigger() method) and also avoids the Uncaught TypeError above:

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

Of course you're still, effectively, using an if to perform an assessment, so I can't be particularly sure that this is any tidier than your own already-implemented solution.

这篇关于使用jQuery或JavaScript绑定到自定义CSS动画结束事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！