TransitionGroup ​

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

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

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

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

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

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

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

Анимация добавления / удаления элементов списка ​

Вот пример анимации перехода добавления / удаления элементов 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-переходы через data-атрибуты, также можно настроить задержку для переходов в списке. Сначала мы отображаем индекс элемента как data-атрибут в 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-хуках, мы анимируем элемент с задержкой, отталкиваясь от этого data-атрибута. В данном примере для выполнения анимации используется библиотека GSAP library:

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

Связанные

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