I have a custom animation framework that uses css transitions.
In order to allow for callbacks i attach
$element.one('webkitTransitionEnd transitionend',function(){
$element.css({
'-webkit-transition':'',
/* And so on... */
});
if(callback){
// This is to make sure that chained events are not fired before the styling is flushed to the DOM, otherwise some animations will not have css transitions
setTimeout(function(){
callback();
},0);
}
});
$element.css({
'-webkit-transition':'height '+duration+'s ease-out',
/* And so on... */
});
$element.css('height',height);
However, some of the same event listeners are fired again and again (yes, it's actually the same functions with the same guids, I checked). It seems the .one is not properly removing it again.
I've tried making a small test-fix with a
var used = false;
$element.one('webkitTransitionEnd transitionend',function(){
if(!used){
used = true;
/* Rest of function... */
}
}
and I get several catches using the boolean to keep track if they have been fired, so I keep them from refiring at least. But I'd like to know why they are refiring.
I doubt that both webkitTransitionEnd
and transitionend
is beeing fired so you would end up with a lot of unused events bound on your elements. I would unbind the event instead of binding using .one
:
$element.on('webkitTransitionEnd transitionend', function() {
$element.off('webkitTransitionEnd transitionend', arguments.callee);
});
Note that the above example doesn't work when using "use strict"
. Then you should use:
$element.on('webkitTransitionEnd transitionend', function handler() {
$element.off('webkitTransitionEnd transitionend', handler);
});
Not sure if it solves your problem. But you could try.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.