Angular animate()用法

[deepthan]

animate : 动画

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

• timings ： duration delay easing

  它是一个字符串，有三个参数：
  • duration : 动画持续时间
  • delay ： 动画延迟几秒后开始
  • easing ： 动画的缓和程度
    如果只有一个数字，那么会被认为是 duration 的值。如：

  animate("200 ease-in", ...)
  // 被编译成  duration=200, easing=ease-out
  
  animate("200 1000 ease-in", ...)
  // 被编译成  duration=200, delay=1000, easing=ease-out
  

• styles:

  它可以是 style(样式) 或 keyframes(关键帧)，具体用法看下面详细介绍。

  animate(timings, style({ background: "red" }))
  animate(timings, keyframes([
    style({ background: "blue", offset: 0.2})),  // 20%
    style({ background: "red", offset: 1}))   // 100%
  ])