[英]Bind to custom CSS animation end event with jQuery or JavaScript?
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. 现在,我们绑定到webkitAnimationEnd事件,并使用gnarly if / then语句以不同方式处理每个动画。
Is there a way to essentially create custom webkitAnimationEnd events, allowing us to fire a specific event handler when a specific animation ends? 有没有办法实质上创建自定义webkitAnimationEnd事件,允许我们在特定动画结束时触发特定的事件处理程序? For instance, fire handler1 when animation1 ends and fire handler2 when animation2 ends.
例如, animation1结束时的fire handler1和animation2结束时的fire handler2 。
We're building for Webkit browsers, specifically Mobile Safari. 我们正在构建Webkit浏览器,特别是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: 对于简单的事件触发器,您可以将函数传递给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));
});
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));
});
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). 虽然,在这种情况下,应该改变
return false
以便不提供错误Uncaught TypeError: Object false has no method 'indexOf'
(我还没有考虑到这一点)。
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: 下面导致被调用函数(
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);
});
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. 当然,你仍然有效地使用
if
进行评估,所以我不能特别确定这比你自己已经实现的解决方案更整洁。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.