How it works...

The Transition component can receive up to six props that can set up custom classes for each step of the transaction. Those props are enter-class, enter-active-class, enter-to-class, leave-class, leave-active-class, and leave-to-class. In this recipe, we used enter-active-class and leave-active-class; these props defined the custom classes for when the element is visible on the screen or leaves the screen.

To use custom animations, we used the Animate.css framework, which provides custom CSS animations that have been pre-made and ready for use. We used bounceInLeft and bounceOutLeft in order to make the element slide in and out from the screen.