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

Тепер це виглядає набагато краще - навіть анімація плавна, коли весь список перемішується:

Повний приклад

Нестійкі переходи списків ​

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

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

Пов'язані

• Посилання на API <TransitionGroup>