Introduction to Vue.js

Introduction to Vue.js Challenge 5: Adding Animation

Topics:
Sarah Drasner
Sarah Drasner
Netlify

This course has been updated! We now recommend you take the Introduction to Vue 3 course.

Check out a free preview of the full Introduction to Vue.js course:
The "Challenge 5: Adding Animation" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students create a transition or animation for the entrance or exit of an element.

Get Unlimited Access Now

Transcript from the "Challenge 5: Adding Animation" Lesson

[00:00:00]
>> Sarah Drasner: All right, we're gonna do a quick exercise and then we're gonna keep going. So, fork this pen,
>> Sarah Drasner: And I'll make it public.
>> Sarah Drasner: This pen has all of the things kind of rigged up for you. So you have a transition, and I'm gonna say bouncein and rollout here, but you can change the name of these enter and active classes.

[00:00:29] And everything's basically set up, all you have to do is rate the, not all you have to do, I should not say it like that. But what you should do is either take these classes or name them something else and plug CSS animations into those two classes, one for entrance and one for exit.

[00:00:49] Extra points if they're slightly different.