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

Angular предоставляет мощный механизм работы с динамическими списками через анимации состояний элементов при добавлении, удалении и изменении порядка. Основной инструмент — директива *ngFor в сочетании с анимациями trigger и query.

Появление и исчезновение элементов

Для анимации добавления или удаления элементов используются состояния void и *:

trigger('listAnimation', [
  transition('void => *', [
    style({ opacity: 0, transform: 'translateY(-20px)' }),
    animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
  ]),
  transition('* => void', [
    animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(20px)' }))
  ])
])
  • void => * — элемент появляется в списке
  • *** => void** — элемент удаляется из списка

Использование translateY создаёт ощущение выдвижения элементов вверх или вниз при изменениях.

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

Angular позволяет анимировать изменения порядка элементов с помощью query, stagger и animateChild:

trigger('listReorder', [
  transition('* <=> *', [
    query(':enter', [
      style({ opacity: 0, transform: 'translateY(-15px)' }),
      stagger('50ms', animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })))
    ], { optional: true }),
    query(':leave', [
      stagger('50ms', animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(15px)' })))
    ], { optional: true })
  ])
])
  • stagger — последовательное появление или исчезновение элементов с задержкой
  • query — выбор элементов для анимации по состоянию (enter, leave, animate)
  • animateChild — позволяет включить вложенные анимации внутри элементов списка

Комбинирование анимаций

Для динамических списков часто комбинируются различные эффекты: появление, исчезновение и изменение позиции. Это создаёт ощущение живого интерфейса, где элементы не просто появляются, а «двигаются» естественно.

<div [@listAnimation]>
  <div *ngFor="let item of items">
    {{ item.name }}
  </div>
</div>

В этом примере при добавлении или удалении элементов будет автоматически применяться заданная анимация, создавая плавный визуальный поток списка.

Временные функции и возможности анимации списков в Angular позволяют реализовать интерфейсы с высокой динамикой и отзывчивостью, сохраняя при этом контроль над каждым элементом и переходом.

Оглавление