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