How to animate lists in Vue.js
Shubham Singh KshatriyaOverview
In modern-day web applications, animations can add a lot of value to the user interface. Captivating animations can greatly increase the time a user spends on the website.
Vue.js provides built-in animation support to perform animations. In this shot, we will see how to animate lists using the animation features of Vue.js.
The transition-group component
Vue.js provides a specific component, transition-group, which is used to animate the insertion, deletion, shuffling, and so on of the elements rendered in a list.
This component contains an attribute name that is used as the root component to define animations using CSS. It also contains an attribute tag that specifies the type of HTML tag (element) to be rendered.
Example
In this example, we'll do the following:
- Create and render a list using
v-for, and wrap it inside thetransition-groupcomponent.
- Create a button to push items into the list.
- Create a button to pop items from the list.
- Animate the list elements when an item is pushed into the list or popped from the list.
Now, let's look at the code:
div {
text-align: center;
}
button {
margin-right: 10px;
border: none;
border-radius: 5px;
background-color: black;
color: white;
font-size: 16px;
padding: 4px 8px;
font-weight: 500;
cursor: pointer;
}
.item {
width: 150px;
border: 1px solid gray;
border-radius: 5px;
box-shadow: 3px 5px 10px gray;
padding: 5px 0;
margin: 5px auto;
list-style: none;
}
/*
Adding animations for list items
*/
.list-enter-active {
animation: fade-in 0.5s ease-in-out;
}
.list-leave-active {
animation: fade-in 0.5s ease-in-out reverse;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateX(30px);
}
100% {
transform: translateX(0px);
}
}Explanation
In the file Example.vue:
- Line 3: We create a button to push items into the list. When clicked, it will invoke the
pushItem()function. - Line 4: We create a button to pop items from the list. When clicked, it will invoke the
popItem()function. - Lines 5–7: We create and render a list using
v-forand wrap it inside thetransition-groupcomponent. We uselistandulas thenameandtagattributes, respectively. - Line 11: We import the
Example.jsscript. - Line 13: We import the
Example.cssstylesheet.
In the file Example.js:
- Lines 2–7: We define and initialize the required variables inside the
data()function. - Lines 9–12: We create a function
pushItem()that pushes a new item into the list. - Lines 13–16: We create a function
popItem()that pops the last item from the list.
In the file Example.css:
- Lines 1–25: We add some general CSS for the buttons and list items.
- Lines 30–32: We add CSS to animate the item when it is pushed into the list.
- Lines 34–36: We add CSS to animate the item when it is popped from the list.
- Lines 38–46: We create an animation
fade-inusing keyframes.
Since we have used
name="list"in thetransition-groupcomponent, we have to uselistas the root component in CSS, followed byenter-activeorleave-active.
Output
In the output, while pushing or popping a list item, we can see the fade-in animation.
RELATED TAGS
CONTRIBUTOR
Shubham Singh KshatriyaView all Courses
