Vue - テーブル行の変更をアニメーション化する方法

Question

新しい行が追加されたり、行が削除されたりすると、テーブル上でアニメーションが動作します。

変更 - 行は追加または削除されませんが、その行にバインドされたデータは変更されます。

これは可能ですか？

Answer 1

@craig_hが示唆するように状態を遷移させるか、アニメーションの終わりを監視する通常のjavascriptイベントを設定することができます。

2番目の方法を使用するには、新しい行を追加することができます。changed: false各行のデータに変更を加えたら、trueに設定します。これにより、「変更された」行にクラスが追加されます。次に、行に 'changed'クラスがあるときに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 ...