Understanding transition modes

You have probably wondered what mode="out-in" (in Vue) or mode: 'out-in' (in Nuxt) is – for example, in our previous Vue apps with the <div>about</div> and <div>contact</div> components in them. They are there because the transition between <div>about</div> and <div>contact</div> is rendered simultaneously. This is the default behavior of <transition>: entering and leaving simultaneously. But sometimes, you may not want this kind of simultaneous transition, so Vue provides a solution with the following transition modes:

• The in-out mode

This mode is used to let the new element transit in first until its transition is complete, then the current element will transit out.

• The out-in mode

This mode is used to let the current element transit out first until its transition is complete, then the new element will transit in.

So, you can use these modes in the following ways:

• In...