Как добавить анимацию при рендере новых данных в vue js?

Question

[nepster-web]

Есть таблица (на div это важно) из 10 строк. Задача сделать ее постоянно обновляемой.

Собственно реализация незамысловатая:


Вопрос состоит в том, как сделать анимацию таким образом, чтобы казалось, что данные двигаются сверху вниз?

как-то так:


Будет не плохо, если еще библиотеку для vue посоветуете.

Answer 1

[0xD34F]

используйте transition-group:

<transition-group name="slide" tag="div" class="table-body">
  <div class="table-tr" v-for="item in items" :key="item.id">
    <div class="table-td">{{ item.id }}</div>
    <div class="table-td">{{ item.user }}</div>
  </div>
</transition-group>

.table-tr {
  transition: 0.5s;
}

.table-body {
  overflow: hidden;
}

.slide-enter-from {
  transform: translateY(-100%);
}
.slide-enter-to {
  transform: translateY(0);
}

https://jsfiddle.net/Lr5qnwtv/1/

Comments

[nepster-web]

что-то он первый элемент не цепляет, тоесть движение всей таблицы начинается со 2 строки.

[0xD34F]

Всё работает как надо. Какого чёрта, а? - посмотрите ещё раз на свой же вопрос, на гифку под заголовком "как-то так". Первая строка - заголовок, она и не должна двигаться. ЧТО НЕ ТАК?

Answer 2

[Воващ]

во время created анимация сработает на всех, после при обновлении данных будет воспроизводиться на последнем (верхнем)

.table-td {
  border: solid 1px silver;
  padding: 5px;
  margin: 5px;
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

Comments

[nepster-web]

тут у меня только 1 элемент скачет. а ест ьвариант, как на гифке, чтобы она буд-то вниз спускается ?