Vue.js 2 Cookbook

Transition modes

To fix this problem, we will change the transition mode. Let's modify the <transition> 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.