Vue.js Dynamic List Transitions

Dynamic List Transition

Dynamic List Transitions defines as the animated transitions that occur when the elements are added, remove, or rearranged in a list. This process wraps the list in transition components by adding CSS for transition and adding animations to the transition components.

Implementing Dynamic List Transition

• Adding Transitions: The programmer can wrap the list component with the <transition-group> element provided by Vue.js. This element acts as a container for the list and transition which applies to list items.

• Defining Transition Classes: It includes some set of predefined CSS classes which can be used to define different levels of the transition. These classes contain v-enter, v-enter-active, v-leave, v-leave-active, etc. programmer can define CSS rules for these classes to create the desired transition.

• Applying Key Attribute: Each item in a list should have a unique :key attribute. this key attribute in Vue.js are helping to identify items and apply appropriate transition effects when they are added, removed, or rearranged.

• Transition Modes and Customization: Vue.js are providing different transition modes, like “in-out” and “out-in”, which is determine the order of animation when items are added or removed simultaneously. Vue.js serves various transition properties and provides hooks that can be used to customize the timing, behavior, and duration of the transitions.

Syntax :

<transition-group 
 name="list" tag="ul"
 enter-active-class="fade-enter-active"
 leave-active-class="fade-leave-active"
 appear 
 appear-class="fade-appear"
 appear-active-class="fade-appear-active"
>
 <li 
 v-for="(item, index) in items" 
 :key="item.id" 
 v-bind="item"
 >
 {{ item.text }}
 </li>
</transition-group>

To Install Vue.js in your system, follow to given steps :

Step 1: To create a new Vue.js project execute the following command.

npm init vue@latest

Project Structure

The project Structure will look like this after the installation.

👁 Screenshot-(120).png

Here are some examples of Dynamic List Transitions. So you can try these examples in your Vue.js project. Copy the Code and paste it as it is in App.vue file.

Example 1: In this example, we created a list by using dynamic List Transitions. And put all the code in App.vue file for the execution.

Output: In this example, the list item was added to the list in non-ordered. It is a simple basic list.

👁 ezgifcom-video-to-gif-(1).gif

Example 2: In this example, when the user clicks the button the item was printed on the window display in numeric order.

Output:

👁 ezgifcom-video-to-gif.gif