如何为Vue中v-for列表的新增项添加淡入动画？

1. 用Vue的<TransitionGroup>包裹列表 #

动态列表的过渡需要用<TransitionGroup>组件（单个元素过渡用<Transition>），它会自动为新增/移除的列表项绑定过渡样式。修改模板如下：

<TransitionGroup name="fade-in" tag="div">
  <div 
    class="d-flex justify-content-between newAppField" 
    v-for="(appField, index) in appFields" 
    :key="appField.id" <!-- 必须用唯一标识当key，禁止用index -->
  >
    <input 
      :id="'newFieldName-' + index" 
      class="w-30 py-2 text-end" 
      placeholder="New Field..." 
      required 
      type="text" <!-- 修正原代码的笔误：type="texts"改为type="text" -->
      v-model="appField.Name"
    >
    <select 
      :id="'newFieldType-' + index" 
      class="w-70 py-2 newAppFieldType" 
      v-model="appField.Type"
    >
      <option v-for="typeOption in stateFieldTypes" :key="typeOption"> 
        {{ typeOption }} 
      </option>            
    </select>
  </div>
</TransitionGroup>

<div id="addField">
  <fa icon="fa-solid fa-plus" @click="addField()"/>
</div>

2. 给新增项添加唯一ID #

v-for的key不能用index（否则删除/新增时key会复用，导致动画异常），所以在addField方法里给每个新项加唯一标识：

// 注：如果appFields是computed属性，必须修改它依赖的源数组（比如ref定义的fields），不能直接push到appFields
function addField() {
  fields.value.push({
    id: Date.now(), // 用时间戳当临时唯一ID，也可以用uuid库生成更可靠的ID
    Name: '',
    Type: ''
  })
}

3. 编写CSS过渡样式 #

根据<TransitionGroup>的name="fade-in"，自动生成对应的过渡类，定义淡入动画：

/* 动画过程的过渡曲线 */
.fade-in-enter-active {
  transition: all 0.5s ease;
}
/* 动画开始前的初始状态 */
.fade-in-enter-from {
  opacity: 0;
  transform: translateY(10px); /* 可选：添加上滑入效果，提升视觉体验 */
}
/* 动画结束后的最终状态 */
.fade-in-enter-to {
  opacity: 1;
  transform: translateY(0);
}

关键注意点 #

• 若appFields是computed属性，禁止直接向appFields添加新项，必须修改它依赖的响应式源数组，computed会自动同步更新。
• 列表项的key必须是唯一且稳定的值，用index会导致动画逻辑混乱。

内容的提问来源于stack exchange，提问作者Nono-Man