So we want to be able to show or hide the modal and in general, when working with animations in
react apps, we've got multiple ways of doing that.
The easiest and straightforward way is a way which has nothing to do with react, using css transitions
and animations.
Let me show this at the example of the modal, let's say we want to have it flying from the top and also
change the opacity and do the same when we close it,
we can do this by setting the opacity to one if modal open is attached and by using the transform
property to translateY which slides it on the y axis by 0.
So with this basically says use the position
it should have,
by the way we positioned it in our html code
so the default position in this case.
Now we can attach the same to modal closed,
but now here opacity would be 0 and translateY
could be -100% to move it up by 100%
when we have the close class attached.
Now if we save this and I click open modal and I click dismiss, we see no difference, now let's actually
also add a transition property to the modal and this is a default css property which allows us to
specify some css properties which should not be applied instantly but instead be animated over time,
again this has nothing to do with react.
And here we could say we want to transition all properties
so no matter if we changed the opacity or we transform this, we want to animate this then we can define
the length
so let's say we want to do this over .3 seconds,
you could also type 300 milliseconds and all the details about transitions can be found in an article
linked at the end of this module,
this is just a quick introduction this is of course not a css course.
So over .3 seconds and then we can define a timing function like ease-out which defines basically
how the animation is distributed over that time,
you could use linear to always move at the same speed but with ease-out, you actually make sure that
you start faster then you end.
Now with that we make sure that we want to animate this, if we now save this file and we go back and
click open
modal and dismiss it,
we see the same as before.
The reason for this is that we also change display, display block and none, this basically prevents any
animation from happening with transition because css doesn't recognize that it makes sense to animate
it because to css, it's hidden anyways by default and then it's instantly shown
so why animate anything in between, it would have been hidden until the animation ended anyways and
the display property can be transitioned.
So let's instead remove display here, like this,
if we now go back
we still don't see the modal but if I click
open modal you see it slide in, if I dismiss it it slides out.
The reason for this effect is that by default the modal now has this opacity of 0 since the modal close
class is attached if the show property is false and it is false as long as we haven't clicked the open modal
button.
So therefore we now got this nice animation
and now here is one important takeaway, animating it like this is perfectly fine
and for this kind of animation, that might be the best possible solution even because you're using native
css features which tend to be quite well-performing
and if you don't need more control than that, you've got all you need here,
we got animation for opening and closing the modal.
So that's an important takeaway,
css transitions as you'll learn them in any css course you might've taken are a fine way
of animating a lot of things in css
and actually, we're also using a css transition in our course project for the modal.
Still I want to dive into some other options and also limitations of css transitions,
so let's see what else we can use.