Vue.js 重复添加同一个类来创建“刚更新”的效果

Question

目标：

我有一个项目列表，当其中一个项目发生变化时，我想通过使其具有淡出为透明的黄色背景来引起用户的注意。

我如何尝试这样做：

我的 Vue 实例有一个items.

每个项目都有一个属性，isChanged，这是一个布尔值，指示该项目是否已被界面中的某些操作更改。

我已将一个类绑定到这些项目，以便当它们的isChanged属性为 true 时，highlight会添加该类。

<ul v-for='item in items' :key='item.id'>

    <li :class="{ 'highlight' : item.isChanged>{{ item.name }}</li>

</ul>

highlight 类只是将背景更改为黄色，然后将其淡化为透明：

.highlight {

    animation: yellowfadingbox 4s;

}

@keyframes yellowfadingbox {

    from {

        background: @yellow;

    }

    to {

        background: transparent;

    }

}

因此，作为示例，我有一个方法updateItem可以进行 ajax 调用，并在调用完成后将该 itemsisChanged属性设置为 true。

updateItem: function (itemKey) {

            axios.get('/item/update', {

                params: {

                    id: id,

                }

            }).then(response => {

                this.item[itemKey].isChanged = true;

            });

        }

这样做的原因是它highlight向项目添加了适当的类，给了我想要的效果。但是，继续前进，highlight该类始终存在，因此我无法重新创建效果。

我该如何解决这种方法/是否有更聪明的方法？