0Pricing
Angular Academy · Урок

Анимации появления и исчезновения

Анимируйте появление и исчезновение элементов

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

Анимация появления и исчезновения

Часто требуется анимировать элементы при их появлении или исчезновении, например при добавлении элемента в список или его удалении. Angular предоставляет для этого псевдонимы :enter и :leave.

void и присутствие

Элемент, отсутствующий в DOM, находится в состоянии void. Появление означает void => *, а исчезновение — * => void.

Псевдоним :enter

:enter — это сокращённая запись void => *. Используйте его для анимации элементов в момент добавления.

transition(':enter', [
  style({ opacity: 0 }),
  animate('300ms', style({ opacity: 1 }))
])

Псевдоним :leave

:leave — это сокращённая запись * => void. Angular сохраняет элемент в DOM до завершения анимации исчезновения.

transition(':leave', [
  animate('300ms', style({ opacity: 0 }))
])

Запуск с помощью управления потоком

Применяйте триггер к элементам, которыми управляют @if или @for. Их добавление или удаление запускает анимацию появления или исчезновения.

@if (visible()) {
  <div [@fade]>Hello</div>
}

Триггер затухания

Ниже приведён универсальный триггер плавного появления и исчезновения.

trigger('fade', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('200ms', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('200ms', style({ opacity: 0 }))
  ])
])

Пример появления со сдвигом

Объедините преобразование и непрозрачность, чтобы создать эффект появления со сдвигом.

transition(':enter', [
  style({ transform: 'translateY(-10px)', opacity: 0 }),
  animate('250ms ease-out',
    style({ transform: 'translateY(0)', opacity: 1 }))
])

Анимация элементов списка

Разместите триггер на каждом элементе внутри @for; добавление и удаление элементов будет анимироваться независимо для каждого из них.

@for (item of items(); track item.id) {
  <li [@fade]>{{ item.name }}</li>
}

Зачем нужен механизм для исчезновения

Обычно удалённый элемент исчезает мгновенно. Механизм анимаций перехватывает удаление, удерживает узел, запускает анимацию :leave, а затем удаляет его — всё автоматически.

Отключение анимаций

Свяжите @.disabled, чтобы условно пропускать анимации, например при настройке предпочтений уменьшенного движения или при первоначальной отрисовке.

<div [@.disabled]="prefersReducedMotion">...</div>

Рекомендации

Делайте анимации появления и исчезновения короткими и ненавязчивыми. Учитывайте prefers-reduced-motion. Для плавности анимируйте преобразование и непрозрачность (они хорошо подходят для GPU), а не свойства макета.

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

Проверьте, насколько хорошо Вы поняли анимации входа и выхода.

Повторение

Вы узнали, что :enter (void => *) и :leave (* => void) анимируют элементы при их добавлении и удалении, работая с @if/@for. Движок удерживает удаляемые узлы, пока их анимация не завершится.

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

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

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

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

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

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

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

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

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

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

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

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

  1. Основы анимаций: trigger и state
  2. Переходы и синхронизация
  3. Анимации появления и исчезновения
  4. Ключевые кадры и поочерёдная анимация
← Назад к Angular Academy