如何实现Vue中v-for元素的逐个入场动画效果？

问题原因 #

你当前代码把v-if放在了<p>标签上，而transition-group仅会监听直接子元素的添加/移除操作来触发过渡动画。现在<div class="partner-wrap">始终存在于DOM中，只是内部<p>显示隐藏，transition-group无法识别这种变化，因此不会触发过渡效果。另外你的setInterval清理逻辑有问题，未保存定时器ID，无法正确清除定时器，可能引发内存泄漏。

修复方案 #

1. 调整v-if位置 #

将v-if移到transition-group的直接子元素（循环生成的<div>）上，当fadeInArray[key]变为true时，该<div>会被添加到DOM中，触发transition-group的入场动画。

2. 修复定时器清理 #

保存setInterval返回的定时器ID，在条件满足时正确清除定时器。

修改后的完整代码 #

Script 部分

<script setup>
import { onMounted, reactive } from "vue";

const state = reactive({
  hover: false,
  fadeInArray: [false, false, false, false, false]
})

onMounted(() => {
  let val = 0;
  // 保存定时器ID用于后续清理
  const timer = setInterval(() => {
    state.fadeInArray[val] = true;
    val++;
    if (val === state.fadeInArray.length) {
      clearInterval(timer);
    }
  }, 2000);
})
</script>

Template 部分

<template>
  <transition-group name="fade-1">
    <div 
      class="partner-wrap" 
      v-for="(partner, key) in [1,2,3,4,5]" 
      :key="key"
      v-if="state.fadeInArray[key]"
    >
      <p>I am fading in!</p>
    </div>
  </transition-group>
</template>

SCSS 样式（保持原有逻辑，确保编译正确）

.fade-1 {
  &-enter-active, &-leave-active {
    transition: all 1s;
  }

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

额外说明 #

若需要调整元素入场间隔，直接修改setInterval的时间参数即可；如果是Vue 3项目，也可结合watch或nextTick进一步优化逻辑，但当前修改已解决核心的动画不生效问题。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov