Transitioning elements that move in a list

In this recipe, you will build a list of elements that move according to how the list changes. This particular animation is useful when you want to tell your user that something has changed and the list is now updated accordingly. It will also help the user identify the point in which the element was inserted.

Getting ready

This recipe is a little advanced; I would suggest you to complete some of the recipes in this chapter if you are not very familiar with transitions in Vue. If you can complete the Adding entering and leaving transitions for elements of a lists recipe without much difficulty, you are good to go.

How to do it...

You will build a little game--a bus station simulator!

Whenever a bus--represented by its emoji--leaves the station, all the other buses will drive a little ahead to take its place. Every bus is identified by a number, as you can see from the Vue instance data:

new Vue({ 
  el: '#app', 
  data: { 
    buses: [1,2,3,4,5], 
  ...