Vue.js 2 Cookbook

How it works...

To recapitulate, you have two different ways to manage transitions between components in Vue. The default way is to start the in transition at the same time with the out transition. We can make that explicit with the following:

<transition mode="in-out">   <!-- elements --> </transition>

We can change this default behavior by waiting for the out part to be finished before starting the in animation. We achieved it with the following:

<transition mode="out-in">   <!-- elements --> </transition>

While the former is useful when elements have the absolute style position, the latter is more relevant when we really need to wait to have a clear way before putting more stuff on the page.

Absolute positioning won't care about having ...