Staggered List Transitions

Create staggered transitions for a list where each item's entry and exit animations are slightly delayed from the previous item, using Vue's <TransitionGroup> and JavaScript.

<template>
  <transition-group name="staggered-list" tag="ul">
    <li v-for="(item, index) in items" :key="item.id" :style="{ transitionDelay: getDelay(index) }">
      {{ item.text }}
    </li>
  </transition-group>
</template>

<script>
export default {
  data() {
    return {
      items: [
        // Dummy data for list items
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        /* ...other items... */
      ],
      staggerAmount: 100, // milliseconds between each animation start
    };
  },
  methods: {
    getDelay(index) {
      return `${index * this.staggerAmount}ms`;
    },
  },
};
</script>

<style>
  .staggered-list-enter-active, .staggered-list-leave-active {
    transition: opacity 0.5s, transform 0.5s;
  }
  .staggered-list-enter, .staggered-list-leave-to /* .staggered-list-leave-active in <2.1.8 */ {
    opacity: 0;
    transform: translateY(20px);
  }
</style>

Vue template for a staggered list animation. The transition group is used to animate items enter and leave with a delay. The delay is calculated using the getDelay method based on the item's index and a stagger amount. CSS transitions are defined for opacity and transform properties for smooth animation effects.