- [Instructor] Let's take a look
at a couple of other options when it comes to transitions.
And then we'll take a look at working with lists.
If you want to animate an element, as it enters the screen
you can simply add the appear property.
You just simply add the appear keyword
to the transition element.
We'll take a look at an example in just a minute.
Now there's also something called a transition mode
and it controls the way the animation plays.
Rather the order that the transitions
inside the transition component play
and normally animations inside the transition object
would all trigger at once.
And that can be good and bad
depending on what you want to accomplish.
So here you add the keyword mode
and then one of the directions which are in-out or out-in
so in-out will play the new element
and then the current element
and out-in plays the current element,
and then the new element.
Now this doesn't make a lot of sense
unless you look at an example.
So let's take a look at one right now.
Now in here, if you notice
there's a little bit of an animation
that plays at the beginning
and that's because I added the appear property right there.
If I take it out, you'll see that if it refreshes
it just adds the one button.
So if I put it back in, once it refreshes,
you'll notice that there's a little bit
of an animation on that one button.
Now I have it right now set to out-in
and that's probably the one that you want most of the time.
If I click on this button,
you'll notice that that animation plays for that one button
and then you get the two buttons.
So if I click on it again,
you'll see that it'll play the animation for two
and then the animation for one.
If I reverse this to in-out,
you'll see that it'll look funky.
If I click on the button,
it'll actually start playing the animation for this button
and then finish playing the other one.
So that's not necessarily what you want.
That looks weird.
As I mentioned out in is probably what you want
but there is another option that you might consider
if you set the position property to absolute
for the element.
And of course the parent would also have
to have a position relative
which I've added these bootstrap classes right here.
And I'm going to take the mode out
and you're going to see something slightly different.
So the default is for the animations
to kind of play on top of one another,
which in this case might be a little bit better
if that's what you're looking for.
So you have those three options, to position property,
or to use the mode and out-in as most of the time,
what you're going to want there.
There's a few other properties that aren't quite as useful,
but you need to probably keep them in the back of your mind
for when you're animating.
Number one is the css, which is
whether you want to apply other css transition classes.
Sometimes you can turn this off,
you add it with a colon, css equals false
if you want to turn other css on the page off
so that it only takes the css
that you are putting in your code.
There's also persistent, which hides or shows
instead of inserting and removing elements.
And that's kind of similar to what you would do with v-show.
Type is the type of transitions.
You can specify different types of transitions
just like you can with css.
And then there is a duration property.
It doesn't seem to work quite well all the time,
but you can add a duration property
if you want to your elements.
If you want to look at all the properties
make sure you check out the documentation on this page.
It has a list of all the properties
and methods that you can add to that transition object.
So let's talk about transition groups.
Are slightly different,
they are meant for list items
and they look pretty similar to the transition
except that they get the transition group keyword
and then just as with transitions, you can add a name
and that name becomes what the classes are called.
Just like before.
You can also add a tag that wraps the elements.
So transition groups are essentially for lists
and if you want to wrap a element around the list
they have a URL and an ally, you can add the tag equals
and then in here you would put the URL
if you want it to be a URL
wrapped around all the list items.
So you can add that.
The modes however,
are not going to be available on transition groups.
And it makes sense because it already knows that it's a list
and you're going to see how you can animate those
in just a minute.
Now you do need to add a key,
so remember this is going to be a list.
It's usually something that is based on a V4.
And so you need to have a key under V4s
in order for things to work properly.
So let's take a look at an example of transition groups
and here's one, you can see that what I've done here
is added a list of items.
And because I have the appear effect,
the list is sort of refreshing as they are drawn.
And I've also added a method here.
You can see that I have before enter events,
afterEnter and leave.
And the before enter and the leave events
are pretty much the same.
We're just setting the opacity to zero.
We're doing everything through JavaScript.
I don't believe there's any css on this one.
And what I can do is also stagger the animation
as you can see, if I add a space here
you can see that they don't all appear at once.
They animate one by one
and that's done by modifying the transition delay
on the afterEnter event that we're calling here.
So that's kind of useful when you want to show a list
but you want to kind of stagger, the display of the list.
If we didn't do this afterEnter effect
that would just sort of all appear at once.
Now, VJs allows you to do this really interesting thing
called shuffling with a v-move option.
So you actually have a couple of additional classes
and properties.
So you have the v-move class and then move class
if you want to add a class, instead of some css
just like you do with some of the other properties
that you've seen.
And this is one that you have to see
because what it does is it just animates
whenever the items shift position.
Let's go ahead and check this out, it's kind of neat.
Now to do this, I've added this v-move class right here
and I have some of these similar to what I had before
except that I've added this little shuffle icon here
and I have the same transition group
and I created a little shuffle method
that just reorders the array.
And let me just play it
because you're going to see what it does.
It's pretty cool.
It actually lets you reshuffle the order.
So if for some reason the order of the items is different.
So what we're doing in the shuffle method
is to just reorder the list of elements,
which are right here
and you'll see that it plays a really cool animation.
The way you control the animation
is by using this v-move class right here.
So if I change this to say something like not two seconds
I want to it to be 0.2, something really fast.
You can see that it'll play a lot faster.
So that's an additional sort of bonus.
And this one's really tough
because it's a very kind of weird special instance
but it's a good effect that you might find useful sometimes.
There's a lot of other really nice examples
including how to change state with watchers
which we've talked about watchers already,
but there's some pretty cool examples
that I think you should check out
and do you need to go to this URL to take a look at them?
So, let's take a look at a little practice
and what we're going to be looking at is what we've got so far,
which is the shopping cart
and we've got these items appearing and disappearing.
Everything is pretty much set up
like it was in the last video.
And what we want to do is animate these items a little bit.
So let's take a look at the solution
so that we can see how it works.
You can see that as they appear, they kind of slide in.
And as I moved to the right
eventually it's going to add items
by shifting them from the right.
And as I delete items, it's going to shift them to the left.
So that's kind of the effect that we're looking for.
And of course it can check out the difference right here.
Here's what we want to do.
We want to create a transition group for the products
and use the appear option and a transition group
and finally use different to and from transition
or transform animations.
So, let's go to the problem.
So let's make this window bigger
and what I need to do is find the place
where I'm listing these elements.
That should be a V4 at around line 40 or so.
And what we want to do is create a transition group
for this section.
So in here, we'll add a transition group
and we'll grab this entire list and just put it in there.
We'll also add the appear property.
And because we have two transitions on this page,
I'm also going to give this one, a name
I'll call it products and that means that in my css,
I'm going to have the option,
in addition to all these dropdown groups,
we are going to have now a products class.
And I want the enter-active class
as well as leave-active.
And in here, I want to set the transition
To half a second and ease-in-out.
And then I want to set a different enter-from class animation.
We'll start with an opacity of zero when this begins
and we'll do a transform: translate(300px)
and we'll also need one.
And this one will be called leave-to same opacity
and we'll do -300 pixels.
Now, one interesting thing about code pen
is that if you change the css,
it's not going to automatically reload.
I think it does apply it.
So you can see that if I move this slider over
it's actually applying the animation
but it's not going to show you the appear
until you cause it to refresh
which usually end up just adding or deleting like a space
and that should cause it to reset
and you can see the appear animation happening now.
So animations and transitions are pretty cool
but it's definitely something
that you want to spend some time playing around with.