如何在Vue中删除数据表格元素前先执行delete_animation CSS动画？

嘿，这事儿不难，咱们一步步来搞定这个需求：

1. 先定义CSS动画 #

首先得把delete_animation对应的动画效果写出来，这里给你做个淡出+收缩的示例，你也可以根据自己的需求调整动画细节：

@keyframes deleteAnimation {
  0% {
    opacity: 1;
    transform: scale(1);
    height: auto;
    padding: 10px;
    margin: 5px 0;
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
    height: 0;
    padding: 0;
    margin: 0;
  }
}

.delete_animation {
  animation: deleteAnimation 0.5s forwards;
  pointer-events: none; /* 动画期间禁止点击，避免重复触发删除操作 */
  overflow: hidden; /* 防止元素内容在收缩时溢出 */
}

这里用forwards让元素停在动画结束的状态，pointer-events: none能避免动画过程中误点删除按钮。

2. 修改Vue模板结构 #

给每个列表项绑定动画类，同时监听animationend事件（动画结束时再执行删除逻辑）：

<div id="app">
  <button @click="add">添加元素</button>
  <div 
    v-for="item in array" 
    :key="item.id"
    :class="{ delete_animation: deletingId === item.id }"
    @animationend="finishDelete(item.id)"
  >
    {{ item.text }}
    <button @click="startDelete(item.id)">删除</button>
  </div>
</div>

3. 更新Vue实例代码 #

需要新增一个deletingId来标记正在删除的元素，再补充两个方法分别负责触发动画和完成删除：

var vm = new Vue({ 
  el: '#app', 
  data: { 
    addedId: null, 
    array: [ 
      { id: 1, text: "lorem ipsum" }, 
      { id: 2, text: "lorem ipsum" }, 
    ],
    deletingId: null // 新增：标记当前正在执行动画的元素ID
  }, 
  methods: { 
    add() { 
      this.addedId = this.array[this.array.length - 1].id + 1; 
      this.array.push({ id: this.addedId, text: "..." }); 
    },
    startDelete(id) {
      // 标记要删除的元素，触发动画类的添加
      this.deletingId = id;
    },
    finishDelete(id) {
      // 只处理当前标记的删除元素，避免误操作
      if (id === this.deletingId) {
        // 从数组中移除目标元素
        this.array = this.array.filter(item => item.id !== id);
        // 重置标记，准备下一次操作
        this.deletingId = null;
      }
    }
  } 
})

逻辑说明 #

• 点击删除按钮时，startDelete方法会把deletingId设为当前元素的ID，这会触发该元素的delete_animation类，启动CSS动画。
• 动画结束后，animationend事件会调用finishDelete方法，此时再通过filter从数组中移除目标元素，同时重置deletingId。

这样就完美实现了「先播放动画，动画结束后再删除元素」的效果啦！

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