Let's have a look at react transition group you can simply google for it to find the github repository
of this package.
Now this package is not an official react package or not by the react team but it's a package created by the vibrant
react community and this is a package which allows you to smoothly animate elements when they
are added and removed to and from the dom.
Well let's check out the main documentation,
there you'll see how to install it and then it also describes how it works and how it's used,
feel free to dive deeper into this to really see all possible use cases and what else you can do with
that
but of course, I'll also show you how we may use it together over the next lectures.
First of all let's install it with this
npm install react transition group save command,
I copy that, I'll quit my npm start process,
paste this in and simply run it to now install and store this package in this project here
and of course you add it like this to any react project,
thereafter we can restart npm start.
And now let's start very simple and see this in action, for this I'll not even start with the modal
for now but we'll also soon animate this again but I'll add a button here and that button should
simply show or hide a nice little block, a div with a background color.
So there I'll say toggle and below that toggle I want to render a div,
now first of all let me simply add showBlock here in the state and initially that is false, let's say
and then here, below the button I'll check this.state.showBlock if it is true I'll add a div here
if it is false
I'll render null, like this.
Now this div will receive some inline style here with double curly braces to basically pass a javascript
object and in the javascript object,
I'll set the background color to red and additionally I'll set the width to 100 which will be interpreted
as pixels and the height to 100.
Now with that, let's hook up this button and on a click on this button, I'll actually simply execute a
method here, in this method I'll execute this.setState in the function version where I get the previous
state and then simply return a javascript object where showBlock is set to not previous state
showBlock like that.
So now I'm just basically just toggling between the display of the block,
if you click this button here, we do instead see and hide that
and to make this a little bit less ugly, I'll
also add a line break below our button here,
should be a self-closing element though
so that now it sits above open modal, like that. Let's also quickly add margin auto to our div so that it
is centered and let's give our button this button class name here to also improve its styling a little
bit.
Now with all of that if we save this, we get our toggle button toggling this red block,
now it might not have enhanced the look of our application but now we can use this block to start playing
around with the react transition package
we just installed. If we check out the documentation,
we see that this package exports one important component,
it actually exports more than that but we'll start with this one,
that transition component
now let me show you how this works.
First of all in my app.js file, I will import it
so I will import transition,
you can name this whatever you want,
it's a default export but I'll stick to transition from react transition group /transition
so that's a subpackage which gives us this transition component,
now we use this transition component to wrap what we want to animate,
in our case that's this div here. For that,
let me temporarily get rid of our check here whether we want to render this or not,
let's say we're always rendering this and instead let's add the transition component and wrap the div
with it like this.
That alone won't do much but we can now use this transition component to control the display of elements
inside of it and especially the animation of these elements.
We do this if we have a look at the documentation
by setting this in property, that's an important one. This decides whether the elements wrapped inside the
transition component should be shown or not
amd the transition component simply manages four internal states, entering, entered, exiting and exited which
we then again can listen to too to decide how our elements should be shown,
sounds very strange,
let me show you how it works.
So first of all, let's add this important in property to the transition component,
in determines whether the wrapped elements should be visible or not
so therefore for our div here, we should bind it to showBlock, only if showBlock is true
this div inside the transition component should be rendered.
We also got another important property we have to set on the transition component, timeout.
Now timeout simply is a time value which determines how long this animation should be played or to
be precise, since transition on its own doesn't play anything but just manages these four states I mentioned,
timeout simply determines how long it takes to switch from entering to entered and from exiting to exited
.
and it's this in-between thing
you can then animate.
So here, let's say timeout should be three hundred
and that will be interpreted as milliseconds.
Now with that what happens is that inside the transition component, we can render something dynamic with
curly braces because inside there, we now actually should render a function, that's what the transition
component then in the end gives us back, values we can use in a function or only one value to be precise,
the state.
So in the simplest form what we can do here, we can simply write an arrow function, that is why we need
the curly braces,
this arrow function should then of course return the jsx we actually want to render
and that could be a paragraph which outputs that state again wrapped in curly braces since we're
inside jsx code here again.
Now I'll temporarily cut the div here
to keep it in memory but remove it.
Now with that if we also fix the error I just saw, that in of course should be bound to this state
showBlock, showBlock properties are a state.
So now with that if we save this and we go back to our application, we see that we see exited there because
I am just outputting some text here with my paragraph where I output the state value which is given
to us by this transition component.
Let's see which other values this state value or argument can have, if I click toggle,
you'll see it first switched to entering and then to entered, if I click toggle again,
it's first exiting and then exited and if that's too fast, simply bump up the timeout to let's say 1 second
to have a little bit more time,
now if we click toggle, we see it's entering, entered, exiting, exited and that's all this transition
component does for you,
it manages this state argument it gives to you in a function you pass as a child of the transition component
and this managed state property takes your timing into account.
Now with that, we can of course go back to rendering a div in there but not actually in there like this
but instead in our function here,
so in this function where we get the state, I actually want to return a div and now we know that state
is entering, entered, exiting or exited, we can of course take advantage of this to now manipulate our
style depending on the state.
So for example here, we could say that we want to set the opacity of this element too
and if the state is let's say equal to exited, then the opacity should be zero,
otherwise it should be 1.
Now let's see this in action, if I save this,
now you see that the div is still there, it's taking up its space but it's not visible but toggle it, it's
shown again, if I click toggle again, it disappears after this one second, still we got no animation
right now
but we can see how we can use this transition component,
obviously it would be much nicer to have an animation though.
Now to add this animation, we just need to tweak this a little bit,
we simply have to add the transition property you already learned about and let's say you want to animate
any changes in the opacity property,
you could also use all
so let's go back to opacity though.
Let's say we want to animate this over one second using the same value as we use here in timeout,
1000 milliseconds and we want to do this with these out and all of that should be a string.
If we save this, now if I toggle this, you see it's animated in and animated out.
Now we got one important thing, we're controlling this animation with the transition,
it's still always staying in the dom though
but we can control this by adding more props to the transition component,
we can add mount on enter which simply is a boolean prop which says yeah
if the in property is set to true you should add the wrap element to the dom and on the other end, you can
add unmount on exit to really remove it from the dom
if that's not true. If we now save this, you see no empty space it's gone
but if we now click toggle it's there again, if we click toggle again,
it's removed.
Still no animation due to the way we're controlling this
we're only changing the opacity here when the state is exited, which is to late.
We set this to exiting instead which is entered right at the beginning, we click the toggle button
to remove it,
now you see it fades out.
So now we fixed the issue we had before
we still have an instant animation for showing it because we're not setting the style on that but for
removing it, we're taking advantage of these four different states or actually the two different states
for removing the element, exiting and exited.
And as soon as you start exiting, we already set the opacity to zero and we animate this
but it's not actually removed from the dom until the entire animation,
so this timeout here is over and now we really tell react to only remove this element after the given
period
with the help of this transition component. Now that was a lot of new knowledge,
let's apply this to our modal so that this hopefully becomes a bit clearer.