Vue Academy · Урок

TransitionGroup для анимации списков

Анимация списков v-for, переходы перемещения, последовательные анимации с задержкой

«TransitionGroup для анимации списков» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Анимация списков

<Transition> обрабатывает один элемент. Для списков, отрисованных с помощью v-for, используйте <TransitionGroup>: он анимирует добавление, удаление и изменение порядка элементов.

Свойство tag

В отличие от Transition, TransitionGroup может отрисовать настоящий внешний элемент. Передайте tag="ul" (или любой другой тег), и компонент выведет этот элемент вокруг элементов списка.

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

Каждому элементу нужен key

Для каждого элемента необходим уникальный :key. Vue использует его, чтобы отслеживать перемещённые, добавленные и удалённые элементы. Никогда не используйте индекс массива в качестве ключа для анимированных списков.

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

Классы входа и выхода

TransitionGroup использует те же классы входа и выхода, что и Transition. Определите их для появления и удаления отдельных элементов.

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

Специальный класс move

Главная особенность — класс -move, например list-move. Когда элементы меняют порядок, Vue плавно перемещает каждый из них на новую позицию с помощью перехода преобразования.

.list-move {
  transition: transform 0.4s ease;
}

Метод FLIP

В основе -move лежит метод FLIP: Fсначала запишите старую позицию, Lзатем определите новую позицию, Iс помощью преобразования создайте видимость сохранения прежнего положения, а потом Pзапустите анимацию, убрав это преобразование. Vue выполняет всё автоматически.

/* Vue computes: translate(oldX - newX) then animates to 0 */

Удаляемым элементам нужно абсолютное позиционирование

Удаляемый элемент всё ещё занимает место, из-за чего может нарушиться анимация перемещения соседних элементов. Задайте position: absolute для класса leave-active, чтобы убрать уходящие элементы из потока разметки.

.list-leave-active {
  position: absolute;
}

Пример сортируемого списка

Объедините классы входа, выхода и перемещения, и Vue одновременно анимирует вставку, удаление и изменение порядка элементов.

function shuffle() {
  items.value = items.value
    .slice()
    .sort(() => Math.random() - 0.5);
}

Последовательная задержка с transitionDelay

Чтобы элементы появлялись один за другим, привяжите встроенное свойство transition-delay на основе индекса элемента. Каждый элемент будет ждать немного дольше предыдущего.

<li
  v-for="(item, i) in items"
  :key="item.id"
  :style="{ transitionDelay: i * 50 + 'ms' }"
>
  {{ item.text }}
</li>

Последовательная анимация с хуками JS

Для последовательной анимации, управляемой данными, можно также использовать хуки JS и атрибут data-index, задерживая каждый onEnter на время, зависящее от индекса элемента.

function onEnter(el, done) {
  const delay = el.dataset.index * 50;
  setTimeout(() => {
    el.style.opacity = 1;
    done();
  }, delay);
}

Особенности производительности

FLIP анимирует transform, что хорошо подходит для GPU. Не делайте списки чрезмерно большими и для плавного движения со скоростью 60 кадров в секунду предпочитайте transform и opacity свойствам, вызывающим перерасчёт разметки, например width или top.

Быстрая проверка

Что позволяет делать класс list-move?

Повторение

Вы изучили <TransitionGroup> для списков: отрисовывать внешний элемент с помощью tag, задавать каждому элементу уникальный :key, использовать классы входа и выхода вместе с классом -move для анимации изменения порядка на основе FLIP, абсолютно позиционировать удаляемые элементы и создавать последовательные эффекты с помощью transitionDelay, основанного на индексе.

Часто задаваемые вопросы

Урок «TransitionGroup для анимации списков» бесплатный?

Да — полный текст урока «TransitionGroup для анимации списков» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «TransitionGroup для анимации списков»?

Анимация списков v-for, переходы перемещения, последовательные анимации с задержкой Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «TransitionGroup для анимации списков»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy