Adding entering and leaving transitions for elements of a list

We've already seen animated lists in the Creating a dynamic, animated list recipe; here, we will try to add a visual way to suggest that an element is added or removed from the list. This can add a lot to UX since you have an opportunity to suggest to the user why an element was added or removed.

Getting ready

As said, if you have completed the Creating a dynamic, animated list recipe, you are ready to go. Maybe some familiarity with CSS and transition will help. If you feel like this is needed, just browse the other recipes in this chapter.

How to do it...

We'll build a syllabus to study programming. When we are done with a topic, we'll feel relieved and we want to incorporate that feeling in our app by making the topic float away from the syllabus as we learn it.

The data of the list will be in our Vue instance:

new Vue({ 
  el: '#app', 
  data: { 
    syllabus: [ 
      'HTML', 
      'CSS', 
      'Scratch', 
      'JavaScript...