vue.js: Выделение вновь вставленной строки

Question

Мы используем vue.js для визуализации журналов из живого потока следующим образом:

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

Мы unshift массив с элементами из 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 секунд желтый фон блик для новых добавленных записей журнала.