Formkit AutoAnimate在列表中失效，请求技术修复帮助

架构老林

2026-6-27

修复Formkit AutoAnimate列表动画不生效问题

1. 修正事件名匹配问题

你的列表组件监听的是@delete-hospital，但HospitalItem组件中触发的是deleteHospital（驼峰式）。统一事件名格式确保触发逻辑正常：

要么修改列表组件的监听：

<div v-auto-animate>
  <HospitalItem
    v-for="hospital in hospitals"
    :key="hospital._id"
    :hospital="hospital"
    @deleteHospital="deleteEmit"
  >
  </HospitalItem>
</div>

要么修改HospitalItem中的emit语句：

<i class="fa-solid fa-trash mr-[10px] dark:text-white text-[20px] cursor-pointer"
   @click="$emit('delete-hospital', hospital._id)">
</i>

2. 确保数组更新是响应式的

deleteEmit方法必须通过Vue认可的方式修改数组，才能触发响应式更新和动画：

deleteEmit(id) {
  // 方式1：返回新数组（推荐）
  this.hospitals = this.hospitals.filter(hospital => hospital._id !== id);
  
  // 方式2：修改原数组
  // const targetIndex = this.hospitals.findIndex(h => h._id === id);
  // if (targetIndex !== -1) this.hospitals.splice(targetIndex, 1);
}

禁止直接通过索引赋值（如this.hospitals[index] = null），这种操作不会触发响应式更新。

3. 排查CSS样式冲突

HospitalItem根节点的overflow-hidden样式可能截断动画效果，先临时移除测试：

<div class="flex flex-col justify-center xl:w-[1270px] xl:h-[220px] bg-white border-2 px-[20px] py-[20px] mx-2 rounded-[20px] xl:whitespace-nowrap dark:bg-gray-900 dark:border-gray-400">

如果动画生效，再调整overflow属性，比如给内部内容单独设置overflow-hidden，而非根节点。