All language subtitles for 013 Animating Lists_en

Over the last lectures we spend a lot of talking about transition and css transition because it's

really super important. What however about our list? In this list we're also of course adding and removing

items and it would be nice if we could animate that too because right now, if I add an item it's just there

and if I remove it, it's just gone.

What if we actually wanted to animate this?

Well we can do that,

we can't do it with transition and CSSTtansition alone though,

this wouldn't work,

instead we'll have to use an additional component we can import from the react transition group package,

this component is called TransitionGroup from react transition group, like this /transition

group is the subpackage.

Now transition group can be used in places where you output lists so where you have a dynamic list

of elements, like here in our unordered list. There

we can replace the unordered list element with transition group,

of course also for the closing tag, like this

and then by default this would render a div in its place.

So we can define the component property there conveniently to still render an unordered list element

so that we work with that

but then it will replace itself with this unordered list and still wrap our list items semantically correct.

And then of course we had our list class we can also still add this by simply adding class name as on any

element which should be list. With that if we save this and we go back, we see that it still works but

we get a couple of warnings here,

unknown event handler on exited receive true for non-booleaan attribute in.

Well we're getting all these warnings because right now with our transition group, we're still wrapping

a list of list items and transition group can be used for animating lists but only in conjunction

with the transition or CSSTransition component,

they then both work as you learned it.

So here we now can import let's say css transition to take advantage of these automatically generated

css classes from react transition group, CSSTransition, like this

and now we can use that to wrap our list items.

So here in my list items array,

I can use css transition just like that,

wrap my list item with it

like this, now I need to move the key to the CSSTransition element here because that's now actually the

item we're looping through

and now with that if I save this, you see that we get different warnings now that we don't have a time

out

and if I click this, that it can't find enter, the enter class it essentially tries to add to the css

class. Now the reason for all these errors

is that CSSTransition isn't configured correctly,

we need to pass classNames,

let's say fade and we all need to pass a timeout

let's say here we just hardcode 300 milliseconds.

If we now set up CSSTransition correctly, now it's actually doing something, it's animating something

well it's not animating anything but it's not throwing errors anymore

and the important thing is that now we can start animating this.

Now you might miss the in property we used before to control the state of our transition,

the special thing about transition group and essentially the only thing it does is it's able to handle

multiple items,

it determines whenever one element in the list changes if it's removed or added and it will then manually

set the in property on the wrapped transition

or CSSTransition component so that you don't have to control the in property because you of course can't

do that,

you're handling a dynamic list in the end.

Now with that, the management of the in property is the main difference

so now we can define our fade animation since I set up fade as the trunk here and let's say the list.css

file and I'll add fade-enter,

let's say this is my starting configuration where I set the opacity to 0,

then I'll say fade-enter-active

so whilst the animation is running, I want to animate to an opacity of 1 and I'll do this with a css transition

so set in transition here for opacity over let's say .3 seconds since I defined a time out of 300

here,

over .3seconds with ease-out timing function. I'll then add fade-exit and there we start at

opacity of 1 still and then fade-exit-active,

there I'll set

my opacity to zero

and I also want to add a transition here to animate this. With all these changes if we save that file,

if I now reload my application and add an item, you see it's animated in,

we have this fade effect and the same for removing it,

there it's also animating an element out, just well the wrong one here due to the way we manage this

list with this key which really is just the index.

But still you can see the animation works

and if you have a list where you have a better key, it would also not update this incorrectly.

So this actually works, it's animating the list items out to as well as in, as you can clearly tell

here.

So this is the transition group component,

in the end just a helper, automatically setting the in property on CSSTransition or just transition

and then you work with these transition, CSSTransition components just as you've learned over

the last lectures.

And with that, you got a powerful way of animating lists and here, import it too.