This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Exercise 8: Sitting Tuna Down with Event Listeners" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Rachel Nabors: This is the crowning achievement of this class. We are going to use those animation event listeners to listen for Tuna's animation end and then give him a .sit class after that's fired. So remember how earlier. Before we launch into this, I do wanna make one note that is pretty interesting.
[00:00:25] Earlier we were doing some fun things and someone in the front here had used a set timeout to change the animations class after the three second animation had run by setting a three second long set timeout on it. That kind of works but it's a very brittle thing.
[00:00:46] Most of us know that set timeout is a code smell. Truth is, imagine a future where people do have control over the playback rate of their browser and they can universally set it to be faster or slower for their own appreciation. Then that set timeout would fire too early or too late and it would be really tough.
[00:01:05] You would have messed up animations all over your site. These fire when the animation is finished. No matter how long it takes no matter whether or not some universal change has occurred on the page. So I just wanted to point out that using CSS animation event listeners, they're actually pretty bulletproof.
[00:01:27] So if you're going to listen for animations ending, these are the future forward way to do it. All right, now get up there, use animation end to listen for when the animation is finished, and then slap that .sit class on Tuna.