TransitionGroup ​

<TransitionGroup> - это встроенный компонент, предназначенный для анимации вставки, удаления и изменения порядка элементов или компонентов, отображаемых в списке.

Отличия от <Transition> ​

<TransitionGroup> поддерживает те же параметры, классы перехода CSS и прослушиватели хуков JavaScript, что и <Transition>, со следующими отличиями:

• По умолчанию он не отображает элемент-обёртку. Но вы можете указать элемент для рендеринга с помощью свойства tag.

• Режимы перехода недоступны, поскольку мы больше не чередуем взаимоисключающие элементы.

• Элементы внутри всегда обязаны иметь уникальный атрибут key.

• Классы переходов CSS будут применяться к отдельным элементам в списке, не к самой группе/контейнеру.

Переходы между Enter / Leave ​

Вот пример применения переходов enter / leave к списку v-for с помощью <TransitionGroup>:

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

Перемещение переходов ​

Приведенная выше демонстрация имеет ряд очевидных недостатков: когда элемент вставляется или удаляется, окружающие его элементы мгновенно «подпрыгивают» вместо плавного движения. Мы можем исправить это, добавив несколько дополнительных правил CSS:

.list-move, /* применяем переход к движущимся элементам */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* проверяем, что уходящие элементы выведены из потока компоновки,
 чтобы анимация перемещения могла быть рассчитана правильно. */
.list-leave-active {
  position: absolute;
}

Теперь он выглядит гораздо лучше — даже плавно анимируется при перемешивании всего списка:

Полный пример

Пользовательские классы TransitionGroup ​

Вы также можете указать пользовательские классы переходов для перемещаемого элемента, передав свойство moveClass в <TransitionGroup>, так же как и пользовательские классы переходов на <Transition>.

Потрясающие переходы списков ​

Взаимодействуя с переходами JavaScript через атрибуты данных, можно также перемежать переходы в списке. Сначала мы отображаем индекс элемента как атрибут данных на элементе DOM:

<TransitionGroup
  tag="ul"
  :css="false"
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @leave="onLeave"
>
  <li
    v-for="(item, index) in computedList"
    :key="item.msg"
    :data-index="index"
  >
    {{ item.msg }}
  </li>
</TransitionGroup>

Затем в хуках JavaScript мы анимируем элемент с задержкой на основе атрибута данных. В этом примере для выполнения анимации используется библиотека GSAP:

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}

Ссылки по теме

• Справочник по API <TransitionGroup>