Vue实现类似Stack Overflow的表格新增行渐退高亮效果

嘿，这个需求我太熟了！刚好可以用Vue的过渡系统结合纯CSS实现和Stack Overflow一模一样的高亮消退效果，而且完全不用额外的JS操作，只保留你原来的tasks.push(..)逻辑就行，来看具体方案：

核心思路 #

我们要利用Vue的<transition-group>组件给新增的表格行添加过渡动画，同时用CSS关键帧动画模拟Stack Overflow的橙色高亮消退效果——全程纯CSS，完全不需要jQuery。

完整代码实现 #

HTML部分

<div id="app">
  <table class="list">
    <!-- 用transition-group包裹列表行，指定tag为tbody保证表格结构合法 -->
    <transition-group name="task-row" tag="tbody">
      <tr v-for="(task, index) in tasks" :key="task.id">
        <td>{{ index + 1 }}.</td>
        <td>{{ task.text }}</td>
      </tr>
    </transition-group>
  </table>
  
  <input type="text" v-model="newTask" placeholder="输入新任务..." />
  <button type="button" @click="addTask">Add</button>
</div>

CSS部分

/* 基础表格样式，可根据需求调整 */
.list {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.5rem;
  font-family: sans-serif;
}

.list tr {
  border-bottom: 1px solid #e1e4e8;
}

.list td {
  padding: 0.75rem 1rem;
}

/* 模拟Stack Overflow的高亮消退动画 */
@keyframes so-highlight {
  from {
    background-color: #fffbdd; /* Stack Overflow高亮的橙黄色 */
  }
  to {
    background-color: transparent;
  }
}

/* Vue过渡的激活类，给新增行应用动画 */
.task-row-enter-active {
  animation: so-highlight 2s ease-out forwards;
}

JavaScript部分

new Vue({
  el: "#app",
  data: {
    newTask: "",
    tasks: [
      { id: 1, text: 'task1' },
      { id: 2, text: 'task2' }
    ],
    nextTaskId: 3 // 用于生成唯一key，避免Vue复用DOM导致过渡异常
  },
  methods: {
    addTask() {
      if (!this.newTask.trim()) return; // 空输入不添加
      
      // 只需要push新任务，剩下的过渡交给Vue和CSS
      this.tasks.push({
        id: this.nextTaskId++,
        text: this.newTask.trim()
      });
      
      this.newTask = ""; // 清空输入框
    }
  }
});

关键细节说明 #

1. <transition-group>的使用：因为是列表过渡，必须用这个组件，指定tag="tbody"是为了符合表格的HTML语义，避免浏览器渲染异常。
2. 唯一key的重要性：给每个任务加id作为key，而不是用索引，这能防止Vue复用DOM元素，确保新增的行能正确触发过渡动画。
3. 纯CSS动画：用@keyframes定义从橙黄色到透明的渐变，ease-out让动画结尾更平缓，和Stack Overflow的效果完全一致，时长2秒可以根据需求调整。
4. 无额外操作：你只需要执行tasks.push(...)（这里封装成addTask方法加了输入校验），不需要手动添加/移除类或操作DOM，完全集成Vue的过渡系统。

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