From the course: Interactive Animations with CSS and JavaScript
Unlock the full course today
Join today to access over 23,400 courses taught by industry experts.
Adding an animationend event handler
From the course: Interactive Animations with CSS and JavaScript
Adding an animationend event handler
- [Instructor] As I promised in the last video, I've added some more markup to support the learning montage. So let's go ahead and take a quick look at where we're at in the presentation. I'm gonna go ahead and refresh, and do my I click. And you can see that this part is the same. Still animate those unchosen elements. Now, between this slide and the next slide, I haven't added an autoadvance yet, so I'm gonna go ahead and click on it. Now, this markup is new. Let's go ahead and bring up the developer tools and see what we've got. Now you'll see these slides are all the same as they were before, but here's a new slide that has some new markup in it. You'll see that we've got this new hp-learn element. And it has some children. It has an hp-learn no element, and an hp-learn yes element. And those are what I'm gonna use to indicate whether or not the shape in the center is the one we're trying to target. Also we have an image tag, which is where we're going to change the image…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Animation setup2m 27s
-
CSS @keyframes3m 21s
-
(Locked)
Easing2m 39s
-
(Locked)
Auto-advance with JavaScript2m 46s
-
(Locked)
Control animations with classes2m 27s
-
(Locked)
Animate visibility5m 7s
-
(Locked)
We need a montage1m 17s
-
(Locked)
Adding an animationend event handler5m 42s
-
(Locked)
Animating with CSS transitions5m 57s
-
(Locked)
Targeted animations using IDs3m 26s
-
(Locked)
Manipulating DOM with JavaScript3m 31s
-
(Locked)
Randomize slide displays7m 46s
-
(Locked)
Set timing for transitions3m 36s
-
(Locked)
-
-