Combining transition modes, duration, keys, and v-if

Transition modes are used when we want to smoothly remove one element from the screen and seamlessly replace it with another one. The default transition mode that the <transition> component comes with, without any tweaks needed, is the simultaneous transition: one element is removed at the same time that another is added. 

However, there are some transitions is which it would be better to have the new element appear, and only when this transition is complete does the old element get removed. This transition mode is referred to as the in-out transition mode. To add it, we simply use the custom mode HTML attribute, and give it the value of in-out, like this:

<transition mode="in-out">

Alternatively, we might want to use the out-in transition mode, where we first have the old element transition out, and only then, when the transition is complete, the new element transitions in.

Let's see this in practice. The example is available...