All language subtitles for 012 Customizing CSS Classnames_en

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.