Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Transitions and Animations Chapter 13

In our HTML, we will only need a button and the view of an element:

<div id="app">

<button @click="product++">next</button>

<transition name="slide">

<p :key="products[product % 4]">{{products[product % 4]}}</p>

</transition>

</div>

The modulo 4 (product % 4) is only because we want to start all over again when the list of
products finishes.

To set up our sliding transition, we will need the following rules:

.slide-enter-active, .slide-leave-active {

transition: transform .5s

}

.slide-enter {

transform: translateX(300px)

}

.slide-leave-active {

transform: translateX(-300px);

}

Also, to make everything look good, we finish up with the following:

p {

position: absolute;

margin: 0;

font-size: 3em;

}

If you run the code now, you will see a nice carousel:

Now, let's try to remove the position: absolute from the last rule:

p {

margin: 0;

font-size: 3em;

}