How to animate lists in Vue.js

Overview

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 the transition-group component.
  • 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);
  }
}
Implementing animations using Vue.js

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-for and wrap it inside the transition-group component. We use list and ul as the name and tag attributes, respectively.
  • Line 11: We import the Example.js script.
  • Line 13: We import the Example.css stylesheet.

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-in using keyframes.

    Since we have used name="list" in the transition-group component, we have to use list as the root component in CSS, followed by enter-active or leave-active.

    Output

    In the output, while pushing or popping a list item, we can see the fade-in animation.

    Free Resources

    License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)