Selectors и производные состояния

В Angular анимациях селекторы (state и transition) позволяют управлять визуальными изменениями компонентов в зависимости от их состояния.

Определение состояний

Состояния описываются с помощью функции state(), где указывается имя состояния и соответствующие CSS-стили:

state('open', style({
  height: '200px',
  opacity: 1,
  backgroundColor: 'lightblue'
})),
state('closed', style({
  height: '0px',
  opacity: 0,
  backgroundColor: 'lightgray'
}))

Особенности:

  • Каждое состояние должно быть уникальным.
  • Состояния могут использоваться в привязках [ @triggerName ]="stateName" для динамической анимации.

Переходы между состояниями

transition() определяет условия и параметры перехода между состояниями:

transition('open <=> closed', [
  animate('300ms ease-in-out')
])
  • Стрелка <=> указывает двунаправленный переход между состояниями.
  • Можно задавать односторонние переходы, например 'open => closed'.

Производные состояния и селекторы

Angular поддерживает псевдосостояния через символ ::

  • :enter — элемент добавляется в DOM.
  • :leave — элемент удаляется из DOM.
  • :increment / :decrement — изменения числовых значений для детализированных анимаций.

Пример использования производного состояния:

trigger('listAnimation', [
  transition(':enter', [
    style({ opacity: 0, transform: 'translateY(-20px)' }),
    animate('500ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
  ]),
  transition(':leave', [
    animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(20px)' }))
  ])
])

Ключевые моменты:

  • Селекторы позволяют отделить логику анимации от конкретных значений состояния.
  • Производные состояния обеспечивают автоматическую анимацию при добавлении или удалении элементов.
  • Комбинация состояний и переходов формирует полный жизненный цикл анимации в компоненте.

Интерактивные состояния

Для интерактивных элементов (hover, active) состояния можно комбинировать с классами CSS и триггерами Angular:

trigger('buttonState', [
  state('hovered', style({ transform: 'scale(1.05)' })),
  state('default', style({ transform: 'scale(1)' })),
  transition('default => hovered', animate('200ms ease-in')),
  transition('hovered => default', animate('200ms ease-out'))
])

Это позволяет создавать отзывчивые интерфейсы с минимальным количеством кода и без прямого вмешательства в DOM.

Оглавление