Reader small image

You're reading from  Vue.js 2 Cookbook

Product typeBook
Published inApr 2017
Reading LevelBeginner
PublisherPackt
ISBN-139781786468093
Edition1st Edition
Languages
Right arrow
Author (1)
Andrea Passaglia
Andrea Passaglia
author image
Andrea Passaglia

Andrea Passaglia was born in Genoa, in northern Italy. Interested about technology since his parents gave him a toy computer when he was a boy, he started studying web technologies at an early age. After obtaining his master's degree in computer engineering he worked on the design and implementation of web interfaces for companies of various sizes and in different industries (healthcare, fashion, tourism, and transport). In 2016 he moves in the silicon valley of Europe to tackle new problems in the banking industry at the Edgeverve Dublin Research and Development Labs. A backend technologist by trade, Vue.js is his first tool to bring to life his creations when it comes to the frontend. Andrea is married to a lovely Russian girl from Siberia and they often cook together mixing culinary traditions.
Read more about Andrea Passaglia

Right arrow

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], 
  ...
lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
Vue.js 2 Cookbook
Published in: Apr 2017Publisher: PacktISBN-13: 9781786468093

Author (1)

author image
Andrea Passaglia

Andrea Passaglia was born in Genoa, in northern Italy. Interested about technology since his parents gave him a toy computer when he was a boy, he started studying web technologies at an early age. After obtaining his master's degree in computer engineering he worked on the design and implementation of web interfaces for companies of various sizes and in different industries (healthcare, fashion, tourism, and transport). In 2016 he moves in the silicon valley of Europe to tackle new problems in the banking industry at the Edgeverve Dublin Research and Development Labs. A backend technologist by trade, Vue.js is his first tool to bring to life his creations when it comes to the frontend. Andrea is married to a lovely Russian girl from Siberia and they often cook together mixing culinary traditions.
Read more about Andrea Passaglia