Skip to content

TransitionGroup

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

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

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

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

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

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

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

Совет

При использовании в DOM-шаблонах, на него следует ссылаться как на <transition-group>.

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

Вот пример анимации перехода добавления / удаления элементов v-for списка используя <TransitionGroup>:

template
<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>
css
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
  • 1
  • 2
  • 3
  • 4
  • 5

Анимация перемещения элементов списка

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

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;
}

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

  • 1
  • 2
  • 3
  • 4
  • 5

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

Задержка переходов списка

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

template
<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:

js
function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}
  • Брюс Ли
  • Джеки Чан
  • Чак Норрис
  • Джет Ли
  • Кунг Фьюри

Связанные

TransitionGroupУже загружено