All language subtitles for 005 CSS Transition & Animations Limitations_en

Now over the last lectures we saw how to use css transitions and animations

and as I mentioned, using them is absolutely fine.

Now what's one limitation of using these animations though? We can see it if we use the developer tools

to inspect our dom, if

we do this here,

we see that our modal div and the backdrop div are always present,

they're just not visible because we're actually animating this here.

Now that of course means that all our code, all our html code is always in the dom and just not displayed

because the opacity is 0,

this might not be what we want, it populates our dom with a lot of elements which slows it down a little

bit and which also might not be the best case or the best way to do for accessibility and it is not

very react-ish

if we in the end are back to having to control the display of things with just css, it's also not super bad,

we do it like this in our burger builder in the end and especially for this modal or some side drawer

menu,

this might be perfectly fine but let's say we really want to ensure that we show and hide this differently

by not passing the show in higher property like that but instead by using our ModalIsOpen state to

really show or hide the backdrop in modal elements. I can of course do this by using a ternary expression

where I check if this.state.ModalIsOpen is true,

if it is, I want to render to modal otherwise I render null and I use the exact same logic for the backdrop

to either show the backdrop or render nothing, this is rendering conditional content as we

learned it throughout the course. If we go back and I click open modal,

we just see it move away here actually, well the reason for this is that inside the modal we're still using

the show prop to have the open or closed classes and since we don't pass the show prop anymore here

on the modal and also not on the backdrop,

well it is always considered to be false and therefore inside the modal, always the modal close classes

attached and I place the out animation.

We could of course fix this by still passing show on both, so we could set show on both to this.state.

ModalIsOpen, if

we do it like this,

we go back

We still have an in animation and we now see of course that the element is added to the dom but if I click dismiss,

we don't get an out animation because the element is instantly removed.

The reason for this is that react in our app.js file doesn't wait for re-rendering this jsx and

therefore removing the modal and the backdrop when the state changes, for our animation to finish because

it's not aware of that animation and it's good that it doesn't scan our elements which are to be removed

for possibly running css animations,

that would be a performance nightmare.

So here, we now see a limitation we have with css animations and transitions, animating in showing it

did actually still work because adding the element to the modal simply now also adds css class and the

animation therefore plays but removing happens instantly and that of course means that we get kind of

a bad behavior or look here. Now for that we need other tools to manage this,

now let's have a look at which tools that would be over the next lectures.