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