Letting an element leave before the enter phase in a transition

In the Transitioning between elements recipe, we explored how to make 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 for 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...