transition — Angular | Spec-Zone.ru

Объявляет переход анимации, который воспроизводится при выполнении определённого условия.

Предупреждение об устаревании

Вместо этого используйте animate.enter или animate.leave. Планируется удалить в версии 23

API

function transition(
  stateChangeExpr:
    | string
    | ((
        fromState: string,
        toState: string,
        element?: any,
        params?: { [key: string]: any } | undefined,
      ) => boolean),
  steps: AnimationMetadata | AnimationMetadata[],
  options?: AnimationOptions | null,
): AnimationTransitionMetadata;

@deprecated

Вместо этого используйте animate.enter или animate.leave. Планируется удалить в версии 23

@paramstateChangeExprstring | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any; } | undefined) => boolean)

Строка определённого формата или функция, задающая момент выполнения перехода анимации (см. раздел Выражение изменения состояния).

@paramstepsAnimationMetadata | AnimationMetadata[]

Один или несколько объектов анимации, содержащих инструкции для анимации.

@paramoptionsAnimationOptions | null

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

@returnsAnimationTransitionMetadata

Объект, содержащий данные перехода.

Примечания по использованию

Выражение изменения состояния

Выражение изменения состояния указывает Angular, когда запускать анимации перехода. Оно может быть

строкой с определённым синтаксисом
или функцией, которая сравнивает предыдущее и текущее состояние (значение выражения, привязанного к триггеру элемента) и возвращает true, если переход должен произойти, или false в противном случае

Строка может иметь следующий формат:

fromState => toState, что означает, что анимации перехода должны выполняться, когда выражение, привязанное к триггеру элемента, меняется с fromState на toState

Пример:
```
    transition('open => closed', animate('.5s ease-out', style({ height: 0 }) ))
```
fromState <=> toState, что означает, что анимации перехода должны выполняться, когда выражение, привязанное к триггеру элемента, меняется с fromState на toState или наоборот

Пример:
```
    transition('enabled <=> disabled', animate('1s cubic-bezier(0.8,0.3,0,1)'))
```
:enter/:leave, что означает, что анимации перехода должны выполняться при добавлении элемента в DOM или его удалении из DOM

Пример:
```
    transition(':enter', [
      style({ opacity: 0 }),
      animate('500ms', style({ opacity: 1 }))
    ])
```
:increment/:decrement, что означает, что анимации перехода должны выполняться при увеличении или уменьшении числового значения выражения, привязанного к триггеру элемента

Пример:
```
    transition(':increment', query('@counter', animateChild()))
```
последовательностью любых из перечисленных выше выражений, разделённых запятыми; анимации перехода будут выполняться при совпадении любого из выражений изменения состояния

Пример:
```
    transition(':increment, * => enabled, :enter', animate('1s ease', keyframes([
      style({ transform: 'scale(1)', offset: 0}),
      style({ transform: 'scale(1.1)', offset: 0.7}),
      style({ transform: 'scale(1)', offset: 1})
    ]))),
```

Также обратите внимание на следующее:

void можно использовать, чтобы обозначить отсутствие элемента
звёздочки можно использовать как подстановочные знаки, соответствующие любому состоянию
(следовательно, void => * эквивалентно :enter, а * => void эквивалентно :leave)
true и false также соответствуют значениям выражения 1 и 0 соответственно (но не соответствуют значениям истина и ложь)

Будьте осторожны с элементами, которые добавляются в DOM и удаляются из него: их переходы часто становятся источником проблем для разработчиков.

Обратите внимание: когда элемент с триггером добавляется в DOM, его переход :enter всегда выполняется, но переход :leave не будет выполнен, если элемент удаляется вместе с родительским элементом (в этом случае он будет удалён «без предупреждения» до того, как его переход успеет выполниться; такой переход может произойти, только если элемент самостоятельно удаляется из DOM).

Анимация до конечного состояния

Если последний шаг перехода — вызов animate(), в котором указано значение времени без данных style, этот шаг автоматически считается последним этапом анимации, который приводит элемент в конечное состояние. В этом случае Angular автоматически добавляет или удаляет CSS-стили, чтобы обеспечить элементу правильное конечное состояние.

Примеры использования

Анимации перехода, применяемые в зависимости от значения выражения триггера

  <div [@myAnimationTrigger]="myStatusExp">
   ...
  </div>

  trigger("myAnimationTrigger", [
    ..., // states
    transition("on => off, open => closed", animate(500)),
    transition("* <=> error", query('.indicator', animateChild()))
  ])

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

<div [@myAnimationTrigger]="{
 value: stepName,
 params: { target: currentTarget }
}">
 ...
</div>

trigger("myAnimationTrigger", [
  ..., // states
  transition(
    (fromState, toState, _element, params) =>
      ['firststep', 'laststep'].includes(fromState.toLowerCase())
      && toState === params?.['target'],
    animate('1s')
  )
])