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秒的黃色背景的亮點到新添加的日誌條目。