nepster-web
@nepster-web

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

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

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


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

как-то так:
60b0d9b0f3db9898014920.gif

Будет не плохо, если еще библиотеку для vue посоветуете.
  • Вопрос задан
  • 280 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
используйте 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/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@V0vash

во время 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);
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы