Transitions and Animations Chapter 13If you try your code now, you will see a weird jumping from the products:
This is the problem we are trying to solve. The second transition starts before the first
product has left. If the positioning is not absolute, we will see some weird effects.
Transition modes
To fix this problem, we will change the transition mode. Let's modify the
code:
<transition name="slide" mode="out-in">
<p :key="products[product%4]">{{products[product%4]}}</p>
</transition>Now run your program and you will see the products taking a little more time before
sliding inside the screen. They are waiting for the previous item to go away before entering.
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>