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
})
}
- Брюс Лі
- Джекі Чан
- Чак Норріс
- Джет Лі
- Кунг Ф`юрі
Пов'язані