Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

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.

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>

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>
```
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>
```

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>

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>

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>