Как последовательно анимировать элементы внутри transition-group?

Question

[Алекс Фил]

У меня есть задача, нужно сделать последовательную анимацию элементов массива, выводимых на страницу через директиву v-for. При срабатывании например клика, я вывожу из массива 10 элементов, каждый из которых нужно последовательно анимировать. Как лучше сделать данную задачу и обязательно ли вообще использовать в этом случае transition-group? Будет очень круто, показать это наглядно.

Answer 1

[0xD34F]

Добавим в компонент свойство, указывающее, сколько элементов надо отображать:

data: () => ({
  numShow: 0,
  ...

С его помощью будем получать массив отображаемых элементов:

computed: {
  itemsToShow() {
    return this.items.slice(0, this.numShow);
  },
  ...

Создадим методы для показа следующего или скрытия предыдущего элемента - для этого достаточно делать +/- 1 количеству отображаемых элементов:

methods: {
  showNext() {
    this.numShow = Math.min(this.items.length, this.numShow + 1);
  },
  hidePrev() {
    this.numShow = Math.max(0, this.numShow - 1);
  },
  ...

Повесим этим методы в качестве обработчиков событий завершения показа и скрытия элемента:

<transition-group
  @after-enter="showNext"
  @after-leave="hidePrev"
  ...
>
  <div 
    v-for="(n, i) in itemsToShow"
    :key="n.id"
    ...
  >
  ...

Запуск процесса анимации - только из крайних положений, когда ничего не отображается или отображается всё:

methods: {
  run() {
    this.numShow += ({
      0: 1,
      [this.items.length]: -1,
    })[this.numShow] || 0;
  },
  ...

https://jsfiddle.net/6Ljzpeu2/

А вообще, в документации есть пример на эту тему.

Comments

[Алекс Фил]

Большое спасибо! Ваш ответ крайне исчерпывающий))