vue.js: Highlighting a newly inserted row - vue.js

Question

We are using vue.js to render logs from live stream as follows:
<tr v-else v-for="log in logs" v-cloak>
<td>{{log.id}}</td>
<td>...</td>
</tr>
We unshift the array with elements from EventSource like this:
this.eventSource.onmessage = function(log) {
if (log.data) {
vue.logs.unshift(JSON.parse(log.data));
}
};
This is all nice and working. What I would like to do is to highlight the newly inserted elements for 10 seconds with certain colour so that users can see there is something new.

Answer 1

This would be a good place to use a List Transition effect. Here's a sample of how to apply a highlight effect to new rows in a table:
Template
<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;
}
This will give a 5 second yellow background highlight to newly added log entries.