Vue - 如何动画表格行更改

Question

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

但我想动画行更改 - 它们不被添加或删除，但绑定到该行的数据更改。

这可能吗？

Answer 1

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

要利用第二种方法，您可以为每行数据添加一个新的参数changed: false，然后在更改时将其设置为true。然后这可以将一个类添加到'changed'行。然后，当该行具有“更改”类时，让您的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 ...