Vue.js 2 Cookbook

How it works...

The core of our app is the <transition-group> tag. It manages all the buses identified by their key:

<transition-group tag="p" name="station">   <span v-for="bus in buses" :key="bus"></span> </transition-group>

Whenever a bus enters or leaves the scenes, a FLIP animation (see the Adding your own transition classes recipe) will be automatically triggered by Vue.

To fix ideas, let's say we have buses [1, 2, 3] and bus 1 leaves the scene. What happens next is that the properties of the first bus's <span> element will be memorized before the animation actually starts. So we may retrieve the following object describing the properties: ...