Transitions and Animations Chapter 13Letting an element leave before the enter
phase in a transition
In the Transitioning between elements recipe, we explored how to make the transition
between two elements. The default behavior of Vue is to start the transition of the element
that is entering at the same time that the first element is leaving; this is not always
desirable.
You will learn about this important corner case and how to work around it in this recipe.
Getting ready
This recipe builds on top of the transitioning between two elements and solves a specific
problem. If you don't know what we are talking about, go back one recipe and you'll be on
track in no time.
How to do it...
First, you will see the problem if you have not encountered it yet. Next, we'll see what Vue
offers us to solve it.
The two elements problem
Let's create a carousel effect on our website. The user will view one product at a time and
then he will swipe to the next product. To swipe to the next product the user will need to
click a button.
First, we need our list of products in the Vue instance:
new Vue({
el: '#app',
data: {
product: 0,
products: [' umbrella', ' computer', ' ball', ' camera']
}
})