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 ...