keyframes — Angular | Spec-Zone.ru

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

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

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

API

function keyframes(
  steps: AnimationStyleMetadata[],
): AnimationKeyframesSequenceMetadata;

@deprecated

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

@paramstepsAnimationStyleMetadata[]

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

@returnsAnimationKeyframesSequenceMetadata

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

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

Используйте вместе с вызовом animate(). Вместо применения анимации от текущего состояния к целевому ключевые кадры описывают, как применяется каждый стиль и в какой момент анимации. Сравните с анимацией ключевых кадров CSS.

Использование

В следующем примере значения смещения указывают, когда применяется каждое значение backgroundColor. В начале цвет красный, а после истечения 20% общей длительности он становится синим.

// the provided offset values
animate("5s", keyframes([
  style({ backgroundColor: "red", offset: 0 }),
  style({ backgroundColor: "blue", offset: 0.2 }),
  style({ backgroundColor: "orange", offset: 0.3 }),
  style({ backgroundColor: "black", offset: 1 })
]))

Если для записей стилей не указаны значения offset, смещения вычисляются автоматически.

animate("5s", keyframes([
  style({ backgroundColor: "red" }) // offset = 0
  style({ backgroundColor: "blue" }) // offset = 0.33
  style({ backgroundColor: "orange" }) // offset = 0.66
  style({ backgroundColor: "black" }) // offset = 1
]))