All language subtitles for 003 Using CSS Transitions_en

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.