如何为API返回数据使用Vue Transition Group实现淡入过渡？

要实现后续请求返回的新项淡入效果，且无需用<transition>包裹v-if/v-else元素，可按以下方式调整代码：

1. 重构模板结构 #

移除v-if/v-else对<transition-group>的包裹，让过渡组件始终存在，单独处理loading状态：

<script src="https://unpkg.com/vue@3"></script>

<div class="repo-wrapper">
  <div v-if="!response" class="loading-wrapper">LOADING...</div>
  <transition-group name="fade">
    <div v-for="(repo, index) in response" :key="repo.id">
      <a :href="repo.html_url" :title="repo.description" target="_blank">
        {{ repo.name }}
      </a>
    </div>
  </transition-group>
</div>

2. 修改数据更新逻辑 #

避免直接替换整个数组，通过响应式数组操作触发过渡。若需逐个淡入新项，可先清空数组再逐个添加；若需整体淡入，直接赋值即可：

const { createApp } = Vue

createApp({
  data() {
    return {
      response: null
    }
  },
  methods: {
    fetchData() {
      // 置空数据，显示loading
      this.response = null;
      fetch('https://api.github.com/orgs/vuejs/repos')
        .then(response => response.json())
        .then(data => {
          // 方式1：逐个添加新项，实现依次淡入
          this.response = [];
          data.forEach((item, idx) => {
            setTimeout(() => this.response.push(item), idx * 30);
          });

          // 方式2：直接赋值，实现整体淡入
          // this.response = data;
        })
    }
  },
  mounted() {
    this.fetchData();
  },
}).mount('.repo-wrapper')

3. 保留过渡样式 #

原有CSS样式无需修改，确保类名与<transition-group>的name属性匹配：

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

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

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

核心原理 #

• <transition-group>会自动监听数组的新增/删除/排序变化，为对应DOM元素应用过渡样式；
• 移除外层v-if/v-else后，过渡组件始终存在，更新response时直接触发过渡，无需额外包裹外层过渡；
• 通过响应式数组方法（如push）或直接赋值，Vue会识别元素的新增操作，触发fade-enter系列过渡类实现淡入。

内容的提问来源于stack exchange，提问作者dbzx10299