将过渡应用于v-for中的组件

<template>
  <transition-group name="fade">
    <div v-for="item in items" :key="item.id">
      <transition name="slide">
        <custom-component :data="item"></custom-component>
      </transition>
    </div>
  </transition-group>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" }
      ]
    };
  }
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(100px);
}
</style>