Question

I have a css transform that happens when a button is clicked shown here http://jsfiddle.net/xCkX7/5/

I’m not sure if this possible but, would it be possible to make a event listener or perhaps there’s a different method, so when that button is clicked and the transform is complete another class replaces that transform class that just finished and makes a second animation. I want to avoid using keyframe animation because I’m having an issue with that particular method where I want to use the end state of the animation for a transform, but it resets. You can see that issue here http://jsfiddle.net/xCkX7/23/

Basically I’d like the animation to run it’s course (it’s two step), finish, and then be able to click another button to have other transforms happen. Like here http://jsfiddle.net/xCkX7/21/ except the starting transform is only one step.

Answer 1

The transitionend event fires whenever a CSS transition finishes. You can listen for that event from your first transition and then start the second transition when that event fires.

Keep in mind that there are vendor-specific prefixes on the transitionend event name in some browsers.

What you could do in this case is the follow sequence:

1. Button is clicked
2. Add event listender for transitionend event on the target object
3. Make change that starts the first transition
4. When transitionend event fires, remove event listener to you don’t get confused with other transitions ending
5. Make change that starts the second transition

You can see a working version of multi-stage transitions here: http://jsfiddle.net/jfriend00/5FnwY/