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.