Skip to content

TransitionGroup

<TransitionGroup> — це вбудований компонент, розроблений для анімації вставки, видалення та зміни порядку елементів або компонентів, які відображаються у списку.

Відмінності від <Transition>

<TransitionGroup> підтримує ті самі властивості, класи переходів CSS і хуки слухачів JavaScript, що й <Transition>, з такими відмінностями:

  • За промовчанням він не відображає елемент обгортки. Але ви можете вказати елемент для візуалізації за допомогою властивості tag.

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

  • Елементи всередині завжди повинні мати унікальний атрибут key.

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

TIP

У разі використання в шаблонах 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 через атрибути, можна також розмістити переходи в списку. Спочатку ми візуалізуємо індекс елемента як атрибут в елементі 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. У цьому прикладі для виконання анімації використовується бібліотека GreenSock:

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

Пов'язані

TransitionGroup has loaded