vue js表格高亮效果类似Stack Overflow添加新行时的效果

Question

我有一个简单的表，用户可以向其中添加行。界面和这个很像：
https://jsfiddle.net/fgu4q8j0/1/

<div id="app">
  <table class="list">
    <tr v-for="(task,index) in tasks">
      <td>{{index+1}}.</td>
      <td>{{task.text}}</td>
    </tr>
  </table>
  <input type="text" v-model="newTask" />
  <button type="button" @click="tasks.push({text: newTask})">Add</button>
</div>

new Vue({    
  el: "#app",
  data: {
    newTask: "",
    tasks: [{text: 'task1'}, {text: 'task2'}]
  }
});

我想在添加新行时创建高亮效果，该效果会缓慢衰减 - 非常类似于 Stack Overflow 在单击包含特定答案/评论的哈希 (#) 的 url 时的橙色高亮效果。
如我所见，Stack Overflow 使用 jQuery 制作动画。我正在寻找一个纯 CSS 的解决方案，希望除了 tasks.push(..) 之外什么都不做，并且可能集成到 vue 过渡系统中。

Answer 1

您可以通过使用动画并为您的新项目添加一个类来做一些简单的事情：

new Vue({
  el: "#app",
  data: {
    newTask: "",
    tasks: [{
      text: 'task1'
    }, {
      text: 'task2'
    }]
  }
});

tr.new {
  animation: blink 2s ease;
}

@keyframes blink {
  0% {
    background-color: yellow;
  }
  100% {
    background-color: white;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <table class="list">
    <tr v-for="(task,index) in tasks" :class="{new: task.new}">
      <td>{{index+1}}.</td>
      <td>{{task.text}}</td>
    </tr>
  </table>
  <input type="text" v-model="newTask" />
  <button type="button" @click="tasks.push({text: newTask, new: true})">Add</button>
</div>

如果你不想像这样跟踪状态，那么你必须正确地做事并使用 Vue 的<transition-group>，如果你检查this，它说你需要模板选项来绕过浏览器在table 中剥离标签的行为...所以你可以创建一个像这样的组件：

Vue.component('tasks-list', {
  template: `
    <div>
      <table class="list">
        <transition-group name="blink">
          <tr v-for="(task,index) in tasks" :key="index">
            <td>{{index+1}}.</td>
            <td>{{task.text}}</td>
          </tr>
        </transition-group>
      </table>
      <input type="text" v-model="newTask" />
      <button type="button" @click="tasks.push({text: newTask, new: true})">Add</button>
    </div>`,
  data() {
    return {
      newTask: "",
      tasks: [{
        text: 'task1'
      }, {
        text: 'task2'
      }]
    }
  }
})
new Vue({
  el: "#app",
});

.blink-enter-active,
.blink-leave-active {
  transition: background 2s ease;
  background-color: white;
}

.blink-enter,
.blink-leave-to {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <tasks-list></tasks-list>
</div>

Answer 2

您可以在tr 周围添加<tbody name="fade" is="transition-group"> 标记，使其适用于表格行。见this Github issue。

new Vue({    
  el: "#app",
  data: {
    newTask: "",
    tasks: [{text: 'task1'}, {text: 'task2'}]
  }
});

body {font-size: 20px}

.fade-enter-active, .fade-leave-active {
  background-color: none;
  transition: all 2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  background-color: yellow;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>

<div id="app">
  <table class="list">
    <tbody name="fade" is="transition-group">
      <tr v-for="(task,index) in tasks" :key="index">
        <td>{{ index + 1 }}.</td>
        <td>{{ task.text }}</td>
      </tr>
    </tbody>
  </table>
  <input type="text" v-model="newTask" />
  <button type="button" @click="tasks.push({text: newTask})">Add</button>
</div>