Vue - 如何为表格行更改设置动画

Question

当添加新行或删除行时，我在表格上运行动画。

但我想为更改的行设置动画 - 它们不会被添加或删除，但绑定到该行的数据会发生变化。

这可能吗？

Answer 1

您可以按照@craig_h 的建议查看状态转换，或者只是设置一个常规的 JavaScript 事件来监视动画结束。

要使用第二种方法，您可以为每行数据添加一个新参数 changed: false，然后在更改时将其设置为 true。然后可以将一个类添加到“已更改”行。然后让您的 CSS 在该行具有“已更改”类时触发动画。现在您需要做的就是监听该行上的 'animationend' 事件并将更改的参数重置为 false。比如：

html - 行元素

<table>
  <tr
    ref="rows"
    :class="{ changed: row.changed }"
    v-for="(row, index) in rows">
    <td><input v-model="row.title" type="text"></td>
    <td>
      <button @click="saveRowEdits(index)">save</button>
    </td>
    ...

组件

data () {
  return {
    rows: [
      { title: 'foo', changed: false },
      { title: 'bar', changed: false },
    ],
    ...
  }
},
methods: {
  saveRowEdits (index) {

    // get the rows DOM el
    const row = this.$refs.rows[index]

    // watch for animationend
    const callback = () => {
      row.removeEventListener("animationend", callback);
      this.rows[index].changed = false
    }

    row.addEventListener("animationend", callback, false)

    // update param
    this.rows[index].changed = true

  },
  ...

CSS

row.changed {
  animation: changed-row 1s ...