I had 2 animations, the first one would last 10 seconds and the second one had to start from the time the first one ends. After some research I found the following solution:
First animation:
canvas1 = document.getElementById("myCanvas") ;canvas1.addEventListener('transitionend', spin_finished, false);
---Start First animationSecond animation:function spin_finished() {
canvas1.removeEventListener('transitionend', spin_finished, false);
- start second animation
}
The removeEventListener is required to make sure the transitionend event happens only once.
Then I ran into cross browser naming convention problem because each browser calls the transitionend event differently. Then I ran into this elegant solution by NeilJS
// CROSS-BROWSER TRANSITION END EVENT LISTENERS
var transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')]; // bind event listener to transEndEventName eg:
//
So the revised code looks like this after inserting the previous snippet:
First animation:
canvas1 = document.getElementById("myCanvas") ;canvas1.canvas.addEventListener(transEndEventName,
spin_finished, false);
---Start animationSecond animation:function spin_finished() {
canvas1.canvas.removeEventListener(transEndEventName, spin_finished, false);
- start second animation
}
Works great on Firefox, Safari, Opera and Chrome!
References:
