Transitions and Animations Chapter 13While the former is useful when elements have the absolute style position, the latter is more
relevant when we really need to wait to have a clear way before putting more stuff on the
page.
Absolute positioning won't care about having elements on top of each other because they
don't follow the flow of the page. On the other hand, static positioning will append the
second element after the first, making the transition awkward if both the elements are
shown at the same time.
Adding entering and leaving transitions for elements of a list
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
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',
'Python'
]
}