vue3学习笔记之Transition&TransitionGroup

<template>
  <div id="app">
    <button @click="addItem">Add Item</button>
    <transition-group name="fade" tag="p">
      <div v-for="item in items" :key="item.id" class="item">
        {{ item.text }}
      </div>
    </transition-group>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
      ],
      nextId: 3,
    };
  },
  methods: {
    addItem() {
      this.items.push({ id: this.nextId++, text: `Item ${this.nextId}` });
    },
  },
};
</script>
 
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.item {
  margin-top: 10px;
  font-weight: bold;
}
</style>

这个例子中，我们使用了<transition-group>元素来包裹一个v-for循环生成的元素列表。这样，每当items数组发生变化时，Vue 都会自动应用进入和移除的动画。name属性指定了动画的类名前缀，而tag属性定义了包裹动画元素的外层标签，这里是<p>标签。CSS 部分定义了动画的入场和出场的样式。