How to organize smooth replacement of components in Raact?

Question

Layout

Let's say I have a menu, depending on the selected menu, the corresponding component is displayed.
How can I organize a smooth replacement of components?
The first thing that came to mind was to wrap the necessary components in components that animate the smooth appearance. But then what to do with the disappearance?
For example, I want that when choosing another menu, the current one smoothly goes to the side + transparency, and the next one, respectively, smoothly comes from the other side + opacity. I would like a theory, but I will also be grateful for a clear example.

Answer 1

There is an example in the official guide .