- [Instructor] Transitions and transition groups
also create different events
that we can track and modify what's happening
with our application and our animations.
So let's take a look at how that works.
Now to do that, I'm going to go
into my transition group, which is right here,
and I'll get rid of some of these items right here.
These animations are now going
to be controlled with JavaScript.
So I don't need these two right here,
and what I'll do is I will use
the events that are available,
and they look just like the classes that we've been using.
So you can say beforeEnter,
and we can execute a method.
We'll just call it beforeEnter,
but you could call it whatever you want.
And, then we'll create some other event here,
so these are clearly the same thing as typing
v-on and then colon.
So the shortcut for that is the @ sign,
and we'll do whenever we enter,
we'll execute a method we'll call, also, enter.
And, finally,
when we say leave, we'll execute
another method called leave.
All right, so once we have that
it means that we can now go into our JavaScript
and add those methods.
So we'll go ahead and add 'em here at the top.
And, we'll start with beforeEnter,
and this is going to execute a function.
Let's go ahead and add all the events first.
So, we'll just sort of copy this one,
and
we'll change the names of them.
So beforeEnter,
enter, and
leave.
So what's interesting about these events is
that they can receive the individual element
as it is being created,
and so we can capture that by typing in
an el to end the function.
And we can then use that element
just like we could use any other element in the DOM,
and we can say something like el and modify
the class name of that element to whatever we want.
So at the beginning, I don't want my elements to display,
so I'm going to say d-none.
Now, what I want to do in enter and leave
is to animate this element by adding a timer
that delays the process of them coming in
and getting out of the screen.
So I'm going to create a delay variable here,
and
I'm going to need to get the index
for each one of these elements.
So I can do that by adding something
to each one of those elements in the data attributes.
This is similar to what you can do in HTML.
You can add a data attribute that has a custom variable
that you can capture in JavaScript.
And so we get that by going to the element's dataset,
and we're going to capture the index of the element.
So we'll need to add that in HTML,
and I'll just multiply it times 100.
So what will happen here is my indexes
are going to start with the number zero,
and then they're going to go to one, two, three.
However many items I have will determine
what this number will be,
and then by multiplying it by 100,
I'm going to have an offset of milliseconds,
and the delay variable
can be looped through using those milliseconds.
So I'll set a setTimeout here
using a function for that.
So Timeout is going to use that delay,
and what I want to do here is modify again
the class name of the element that I want to animate,
and type in whatever classes that element needs to have.
So they're going to be pretty similar to the classes
the elements have by default.
Those are right here,
so let me go ahead and copy these.
Now I do need to make sure that the element
is not showing up by default.
So I will change this to d-none here.
But in here, I'll go ahead and paste d-flex,
so d-flex is putting things side by side.
But I do want to start with not displaying
the element at first.
And in addition to all this, I do want to add
my custom classes from the animate.CSS library.
So it will be animated
and then I'll use fadeInRight here.
And, let's go ahead and use the same stuff
for the leave function.
And we will just modify this to fadeOutRight.
Same delay.
You can change the delay here if you wanted
to leave a little faster.
That should do it.
Let's check it out,
and let's go ahead and open up HTML here
and just type in a space here
to see if the animation is working.
So you can see the animation is working,
and it doesn't appear to be offsetting quite yet,
so we'll need to fix that.
And so what's happening here is that we don't yet have
that index passed into the element,
so we'll have to add a v-bind here,
and I'll use the shortcut of data-index,
and I'll pass it along the index for this element
so that is coming in from here.
This index that v-for generates for me
is going to be a number between zero
and the amount of elements that we have
that we can pass using that v-bind directive.
And I don't know if you could tell
that when I type in this space here,
you can see that they're offset just a little bit.
If you want to see a larger offset,
then you can just change that number,
and let's open this up and type in.
So you can see now that, also,
when they leave, they don't leave all at once,
but there's a little bit of an offset
in between the elements that leave,
and you can have really fine-tooth control
over these things by using events and methods
instead of just using different class names
or even different styles.