This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Exercise 8: Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Rachel Nabors: In this one, we're not gonna look at this aside from to make knowledge of the fact that it is an id of tuna. We're gonna probably attach JavaScript to that id. We have a class. When tuna gets a class of sit he will run his sit down animation.
[00:00:21] So we wanna listen for his walk cycle animation to finish before we give him a class of sit. Right now he's got that walk cycle running once.
>> Rachel Nabors: So let's do this, I've added a bunch of placeholder stuff right here. Ta-da, animated thing. What is the animated thing we're animating?
[00:00:44] Why, it is none other than "#tuna". Some people use single quotes, some people use double quotes. I'm a double quotes kind of person. I also use tabs, it's cool. Haters gonna hate.
>> Students: [LAUGH]
>> Rachel Nabors: [COUGH] And now over here on animationlistener, what are we listening for? We are listening for animationend.
[00:01:06] And if it doesn't run, keep an eye on those event listeners. Now, here I have done a terrible disservice to people who are just copying and pasting into here. We actually need some curly brackets before we put in a function, an anonymous function. The idea is that you could have gone out here and been like var on, whoa, wow, great.
[00:01:32] Nice tabs there. onTunaWalkEnd = function. And then we would be like, we're gonna do this, and then we're gonna put all of this in there. And then we would do onTunaWalkEnd in here.
>> Rachel Nabors: But I thought it would be so much more fun to write with an anonymous one.
[00:02:02] And so we're just gonna finish this up here, finish our thought. ("#tuna").addClass("sit").
>> Rachel Nabors: And it totally didn't work, probably due to some syntactical error of mine, that's okay. I'm just gonna grab this. Boop boop.
>> Rachel Nabors: So here, we're gonna pass an anonymous function. Parentheses, curly brackets. And inside we are going to say ("#tuna").addClass("sit").
[00:02:34] And there, when he's finished walking he sits down. We could also have used the this. This way the Dom doesn't have to go out there and refine tuna every time this fires. Ta da!