Question

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

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

这可能吗？

Answer 1

你可以看看转换状态为@craig_h建议，或者只是设置一个监视动画结束的常规javascript事件。

要使用第二种方法，您可以为每个行数据添加一个新参数changed: false，然后在更改时将其设置为true。然后，这可以在“已更改”行中添加一个类。然后当行具有“已更改”类时，让您的CSS触发动画。现在您需要做的就是在该行上侦听'animationend'事件并将更改的param重置为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 ...

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

1 个答案: