animation — Angular | Spec-Zone.ru

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

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

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

API

function animation(
  steps: AnimationMetadata | AnimationMetadata[],
  options?: AnimationOptions | null,
): AnimationReferenceMetadata;

@deprecated

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

@paramstepsAnimationMetadata | AnimationMetadata[]

Один или несколько объектов анимации, возвращаемых функцией animate() или sequence(), которые задают переход из одного состояния в другое. По умолчанию используется последовательность, если передан массив.

@paramoptionsAnimationOptions | null

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

@returnsAnimationReferenceMetadata

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

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

В следующем примере определяется повторно используемая анимация с некоторыми значениями параметров по умолчанию.

var fadeAnimation = animation([
  style({ opacity: '{{ start }}' }),
  animate('{{ time }}',
  style({ opacity: '{{ end }}'}))
  ],
  { params: { time: '1000ms', start: 0, end: 1 }});

В следующем примере вызывается определенная анимация с помощью useAnimation() и передаются переопределяющие значения параметров.

useAnimation(fadeAnimation, {
  params: {
    time: '2s',
    start: 1,
    end: 0
  }
})

Если в этом вызове отсутствуют какие-либо переданные значения параметров, используются значения по умолчанию. Если перед анимацией шага отсутствует одно или несколько значений параметров, функция useAnimation() выдает ошибку.