- [Instructor] In this video, we're going to add some better
visual feedback to the updating of our people list, with
animation, using View's built in transition group component.
If you're coming to View from React,
you'll probably have used React transition group before.
View has essentially the same stuff,
used in a similar way, but it's built in.
View's transition components let you describe what happens
to a component over time, using these transitions.
Usually this is going to take the form
of css animation via changing classes.
And that's what we're doing here, but,
just so you know, these components can support
other types of changes as well, should you need them.
I know that sounds a little bit abstract,
but, if you need it, it's there.
The first step in this process is wrapping
our list of items in a transition group component.
So, I'm scrolling down to my directory people component
and I'm going to add a transition group
component around my list of items.
So the name of that component
is transition group, like this.
Make sure I get my backslash at the end of the line.
This is going to wrap around the person components.
Whoops, backslash, and closing.
Now this takes a few props.
The main one that we're going to be
interested in right now is the name for
the transitions to be used in our css classes.
If we don't specify that, it'll just use the letter v.
I'm going to name this fade.
I have some css hooked up already that will use this name.
We'll look at that in a little bit.
So we need a name and then we can set a tag if we want.
The tag that all of these will be wrapped in
to be something other than the span tag.
We don't care about that, so we'll leave that one off.
But that's another common prop you might want to pass.
So if I save this and switch back to the browser,
let's take a look.
I'm going to refresh and there's nothing here.
If I open up the dev tools and look at the console,
make this a little bigger,
we can see this error message that says
'transition group children must be keyed'.
There's one more piece that we need over here in the editor.
This is another convention that you might recognize
if you're coming from React,
where you need a key on any item that's part of a list.
You don't have to use that quite as often in View,
but when you're dealing with transitions, you do.
So that is something that we bind, using Vbind.
So I'll use colon key, and this is any field
that's uniquely identifiable inside this array.
I happen to remember that each person has an id.
So I'm going to use that.
If I save again and switch over to the browser,
reload, everything comes back.
Alright, let's try this.
I'm going to click the intern checkbox.
There we go, just like that, it's working nicely.
Now, this is working nicely because
I already have the css defined.
Let's go take a look at that.
So these are the transitions that I've set up.
Each of these class names comes from
what I set in my name prop.
When the items are coming in, I have whatever
my name was with enter active stuck on the end.
And when the items are taken away,
it's leave active.
So I'm going for an opacity of one
to an opacity of almost zero and then they're removed.
Let's watch these css classes
as they're added and taken away.
Going to open up the developer tools again
and open up the elements inspector.
I'll right click one of these elements and inspect it.
So here are all my person components.
I'm going to check the checkbox and let's watch what happens.
Whoa, those went sailing by
so quickly we barely saw a thing.
So, we can go back to the code, here in directory dot js.
And so we can see what's happening,
I'm going to pass in one more prop
that will go down to each transition component,
which is built automatically inside
the transition group by View.
I can add a duration here,
which I can specify in milliseconds.
So, let's make it five seconds.
So it's much easier to see
what's going on, five thousand milliseconds.
Switch back, refresh, I'll inspect the element again.
Close this down, now let's watch what happens.
There, all of these classes come in.
And then, after five seconds, they're removed
and then I'm just left with the two people who are interns.
View is clever enough to figure out
how long your transitions are actually taking,
by being aware of the events that are fired
by the browser when css transitions finish.
So, most of the time, you're not going
to need that duration parameter.
But, if you want to be able to see
what's happening, it's kind of useful.
What you should be doing to alter the duration
of your transitions, is editing the css
that specifies what the transitions are.
So, if I wanted these to be longer,
I could increase this up to two seconds.
I'll save that and switch back, refresh, there.
Those transitions are much longer now
so I can really see what's happening.
Think I'll dial that back to half a second.
Cuz we don't need the animations
to be that long most of the time.
One more note, if we want to specify class names
for the different stages of a transition
instead of using Views defaults, we can do that.
We just take out name and then specify
these different classes as separate props.
Those props are enter class and leave class.
Those are what's applied for a split second
when items are first added or finally removed.
Likewise, we have leave to and enter to class,
which are added the split second after enter class
or leave class are removed and stay there for the duration.
And then we have enter active class
and leave active class.
These are the main ones
that you're going to use for your styles.
They're what stay on the items for the entire duration
of an enter or leave transition.
A lot of times it's more convenient
just to use whatever View gives you.
But, if you're using animate dot css
or some other library that defines
a whole bunch of transitions for you,
with pre-existing class names, having those options
to specify each piece individually is handy.
And of course, for any of those enter or leave class props,
you can pass multiple classes as long as
they're space separated just like a regular class in css.
So, now you've seen how to use transition groups
to add css animations to your view components.