animate — Angular | Spec-Zone.ru

Определяет шаг анимации, объединяющий сведения о стилях и времени.

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

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

API

function animate(
  timings: string | number,
  styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null,
): AnimationAnimateMetadata;

@deprecated

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

@paramtimingsstring | number

Задает AnimateTimings для родительской анимации. Строка в формате «длительность [задержка] [функция сглаживания]».

Длительность и задержка задаются числом и необязательной единицей времени, например «1s» или «10ms» для одной секунды и 10 миллисекунд соответственно. По умолчанию используются миллисекунды.
Функция сглаживания определяет, как анимация ускоряется и замедляется во время выполнения. Допустимые значения: ease, ease-in, ease-out, ease-in-out или вызов функции cubic-bezier(). Если значение не указано, сглаживание не применяется.

Например, строка «1s 100ms ease-out» задает длительность 1000 миллисекунд, задержку 100 мс и стиль сглаживания «ease-out», при котором анимация замедляется к концу.

@paramstylesAnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null

Задает AnimationStyles для родительской анимации. Вызов функции style() или keyframes(), возвращающий набор записей CSS-стилей, которые будут применены к родительской анимации. Если значение равно null, используются стили конечного состояния. Это полезно при описании шага анимации, завершающего анимацию; см. раздел «Анимация до конечного состояния» в transitions().

@returnsAnimationAnimateMetadata

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

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

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

Примеры синтаксиса

Примеры задания времени

В следующих примерах показаны различные способы задания timings.

animate(500) : Длительность — 500 миллисекунд.
animate("1s") : Длительность — 1000 миллисекунд.
animate("100ms 0.5s") : Длительность — 100 миллисекунд, задержка — 500 миллисекунд.
animate("5s ease-in") : Длительность — 5000 миллисекунд, с плавным ускорением.
animate("5s 10ms cubic-bezier(.17,.67,.88,.1)") : Длительность — 5000 миллисекунд, задержка — 10 миллисекунд, сглаживание по кривой Безье.

Примеры задания стилей

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

animate(500, style({ background: "red" }))

В следующем примере вызывается keyframes(), чтобы задать различные значения стиля CSS для последовательных ключевых кадров.

animate(500, keyframes(
 [
  style({ background: "blue" }),
  style({ background: "red" })
 ])