Now we had a look at CSSTransition at this component in the last lecture, there
I explained that we set up this base class name, this trunk of our css classes and the CSSTransition
component would then automatically expand this to a couple of different css classes
and that's the case. For some reason,
you could also want to make sure that you still use modal open and modal closed, so that you essentially
don't have to define these classes. For that reason,
you cannot only pass a string with your trunk
here to classNames,
you can also pass a javascript object and in this object, you can manually define various css classes
that should be used for the different hooks.
So there in this object you passed to class name,
you can define enter, enter-active, exit and exit-active and there actually are two more, appear and appear-
active which you don't have to define,
they also would have been added to your trunk.
These are used, so appear and appear-active is used for the first time something is rendered to the dom
not when doing it conditionally by rendering it,
for example upon a button click or not
but if you hardcoded it into the dom like in our app.js, the h1 and the button, so if it's always
there but if the application loads, that's of course the first time this gets mounted to the dom and
you could animate this with appear. But appear is not what I want to focus on here,
instead if you say for enter, I don't want to attach anything then you wouldn't have to define it or
you just define an empty string, for enter-active,
you could now define the specific css class you want to add like modal open and then with that, you can
break out of this schema of having a trunk and then -enter, -enter-active and so on.
So with this set up you can define your own css classes which should get added or should get used,
modal close this is the closing class.
And with that if we save this and we now open the modal, you see we get the same animations as before
but now we're using our own css classes.
So that's a tiny addition, this is some flexibility you have to really fine tune this to your needs.