Transition Classes

Then the only thing we must do is to configure these 4 classes, that represent the 4 different stages of an element. Take notice that we have named our class in our CSSTransition component as ‘fade’. This name could be anything but from this name, 4 different classes will be created for every li now:

.fade-enter => When the element is about to mount to the DOM

.fade-enter-active => When the element is has mounted to the DOM

The duration between .fade-enter and .fade-enter-active is going to be the timeout duration you have defined there. Be careful! This is not the transition or animation duration, this will be defined through css inside the appropriate classes! This is the amount of time, react is going to wait in order to mount an element to the DOM.The same way for unmounting, two new classes exist:

.fade-exit => When the element is about to unmount from DOM

.fade-exit-active => When the elements was succesfully unmounted from DOM.

Now we just configure this classes in order to achieve the transition effect!Take care, that transition takes place at the end of each phase and not the beginning as normal css!!! You initialize the opacity to 0, and then you transition the opacity to 1 after the end of each phase. Normally the duration must be the same with the timeout. At the end we end up with something like the image above.

Everything should work now, and everytime a list-item is created on the fly instead of just popping itself to the DOM is faded in. On exit (on deleted) is faded-out. The transition lasts for one second, and after the second React mounts and unmounts.

Advice: It is highly recommended, that you use a css animation library like the animate.css, which is a rich library providing functions for many and different animations. So instead of applying your own functionality (opacity change etc) inside your css classes, you can use existing animation functionality to achieve very nice effects.

Next up

Previous

Transition Group component

Description