- [Instructor] In order to animate list items
like the ones we have right here,
we're going to need to use a variation of the transitions
called transition groups.
So I'm going to collapse some of these elements,
and you can see the transition
that I created earlier up here.
I'm going to give myself some breathing room here.
'Cause what I need to do is add a transition group tag,
and make sure that I close that out.
Let's go ahead and paste that, and use a slash.
And let's go ahead and hide this sidebar thing
so that it doesn't refresh all the time.
So now it's easy enough just like with transitions,
all I need to do is add a name,
and this can be a reference to a style that I've created.
So I can even use the same fade name that I used before,
and that references the CSS elements that are right here.
So in addition to fade, I can also add a tag here.
And this will be an element that will be created
that's going to wrap each of the items
and allows you to control them if you want to.
And in addition to that, I need to go ahead
and add a key to my v-for statement.
So it looks like that.
And then you add a unique identifier.
Now, you should pretty much always use the key
in all your v-for loops.
It is required sometimes.
And sometimes it just gives you a few more abilities.
So it's always good to have it in there.
Luckily we have an ID in each one of our elements,
so we can use the item ID.
Just make sure that it is a unique element.
Remember that you can also request an index
in the for loop itself.
So, once you have this,
you should see your animation play whenever this loads.
So let's go ahead and force load it
by adding or deleting a space.
And you can see that the fading in is taking place.
You could create another CSS animation,
and if you want to you can even use an animated library.
So we've already loaded up in our CSS
something called animate.
That's CSS.
And it's just a series of animations
that have been pre-built for you.
If we wanted to use those,
then we can use the proper attributes here.
So let's go ahead and, again,
let's go ahead and hide this for a second.
And we'll just type 'em in here.
We'll say enter active class is going to be animated.
That's the default, animate that CSS class.
And then we'll say fade in right.
And we'll just copy and paste this
and do leave active class.
And we can try another one here.
So let's try slide out right.
And let's open this up,
again let's try typing a little space here
to force it to reload again.
You can see that they're sliding in.
And if you want to see the sliding out,
we can open up our little drop down
and I think we may need to say fade instead of slide.
So let's try fade out right,
and let's do that again.
And now as elements are deleted,
you can see that they slide to the right.
And then the other ones kind of come in.
It's a little odd to just see them all leave
with just two elements,
but you can see that if I go really slow
and only one element slides out,
then they leave individually.
So that's pretty cool.
It's pretty easy to do.
Very similar to transition.
Remember that you need a key
to isolate each of the items,
and then that this is called a transition group
instead of regular transitions.