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.