vue.js：突出显示新插入的行

Question

我们正在使用vue.js呈现来自实况流日志如下：

    <tr v-else v-for="log in logs" v-cloak> 
         <td>{{log.id}}</td> 
         <td>...</td> 
        </tr> 

我们不印字带元素的数组从EventSource这样的：

this.eventSource.onmessage = function(log) { 
     if (log.data) { 
      vue.logs.unshift(JSON.parse(log.data)); 
     } 
    }; 

这很好，工作。我想要做的是用特定的颜色突出显示新插入的元素10秒，以便用户可以看到有新的东西。

Answer 1

这将是一个使用List Transition effect的好地方。下面是如何在一个表中应用高亮效果，以新行的示例：

模板

<table> 
    <tbody is="transition-group" name="list"> 
    <tr v-for="log in logs" :key="log.id"> 
     <td>{{ log.id }}</td> 
     <td>...</td> 
    </tr> 
    </tbody> 
</table> 

CSS

.list-enter-active { 
    transition: all 5s; 
} 
.list-enter { 
    background: yellow; 
} 

这会给5秒的黄色背景的亮点到新添加的日志条目。