Vue 3.0 List Transition

Vue 3.0 list transition

In Vue 3, the transition-group component is used to apply transitions to elements of a list when they are added, updated or removed. The transition-group component even allows you to change the order of elements and animate these changes.

Let's illustrate this with a simple example. We will display a list of items and apply a transition whenever an item is added, removed or re-ordered. We'll use Vue's v-for directive to render a list of items, and transition-group to animate changes.

<template> <div> <button @click="addItem">Add Item</button> <button @click="removeItem">Remove Item</button> <button @click="shuffleItems">Shuffle Items</button> <transition-group name="list" tag="ul"> <li v-for="item in items" :key="item" class="list-item"> {{ item }} </li> </transition-group> </div> </template> <script> import { ref } from 'vue' export default { setup() { const items = ref([1, 2, 3, 4, 5]) const addItem = () => { items.value.push(items.value.length + 1) } const removeItem = () => { items.value.pop() } const shuffleItems = () => { items.value.sort(() => Math.random() - 0.5) } return { items, addItem, removeItem, shuffleItems } } } </script> <style scoped> .list-item { transition: transform 1s; } .list-move { transition: transform 1s; } </style>

In this example, we're applying a transform transition to the .list-move class, which is automatically applied by Vue whenever list items change position. The transition-group component requires you to specify a name attribute, which is used as the prefix for generated CSS classes (like list-move).

With the above setup, when you add, remove, or shuffle the items in the list, they will smoothly transition to their new positions.

Please note that you need to add a unique :key for each element inside transition-group, which is used by Vue to track the identity of each node and correctly reorder the elements during transition.

Examples

  1. Vue 3.0 transition-group for List Transitions:

    • transition-group is a wrapper for transitioning multiple elements in a list.
    • It provides hooks and classes for enter/leave transitions.
    <template> <transition-group name="list" tag="ul"> <li v-for="item in items" :key="item.id">{{ item.text }}</li> </transition-group> </template> <script> export default { data() { return { items: [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, { id: 3, text: 'Item 3' }, ], }; }, }; </script> <style> .list-enter-active, .list-leave-active { transition: opacity 0.5s; } .list-enter, .list-leave-to { opacity: 0; } </style>

  2. Vue 3.0 List Transition Modes:

    • Choose transition modes using mode attribute.
    • Example modes: 'in-out', 'out-in', 'default'.
    <transition-group name="list" mode="out-in"> <!-- ... --> </transition-group>

  3. Vue 3.0 List Staggered Transitions:

    • Stagger list item transitions for a more dynamic effect.
    • Use stagger attribute with a numeric value.
    <transition-group name="list" stagger="0.1"> <!-- ... --> </transition-group>

  4. Transitioning Between Different Lists in Vue 3.0:

    • Transition between different lists using the key attribute.
    • Ensure each list has a unique key.
    <transition-group name="list" tag="ul"> <li v-for="item in items" :key="item.id">{{ item.text }}</li> </transition-group> <transition-group name="another-list" tag="ul"> <li v-for="item in anotherItems" :key="item.id">{{ item.text }}</li> </transition-group>

  5. Vue 3.0 List Transition Events:

    • Use transition events like @before-enter, @enter, @after-enter, etc.
    • Trigger custom methods during transitions.
    <transition-group name="list" @before-enter="beforeEnter" @after-enter="afterEnter"> <!-- ... --> </transition-group> <script> export default { methods: { beforeEnter(el) { // Before enter transition logic }, afterEnter(el) { // After enter transition logic }, }, }; </script>

  6. Vue 3.0 List Transition Hooks:

    • Leverage transition hooks like before-enter, enter, after-enter, before-leave, leave, and after-leave.
    • Customize transitions using these hooks.
    <transition-group name="list" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave"> <!-- ... --> </transition-group> <script> export default { methods: { beforeEnter(el) { // Before enter transition logic }, enter(el, done) { // Enter transition logic done(); }, afterEnter(el) { // After enter transition logic }, beforeLeave(el) { // Before leave transition logic }, leave(el, done) { // Leave transition logic done(); }, afterLeave(el) { // After leave transition logic }, }, }; </script>

More Tags

setcookie file-copying google-authenticator java-io typeof statistics null gitlab-ci arduino-uno chatbot

More Programming Guides

Other Guides

More Programming Examples