Defines an animation step that combines styling information with timing information.

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

为父动画设置 AnimateTimings。它的字符串格式为 "持续时间 [延迟][缓动效果]"。

Sets AnimateTimings for the parent animation. A string in the format "duration [delay][easing]".

  • 持续时间和延迟都用一个动画和一个可选的时间单位来表示,比如 "1s" 代表一秒,"10ms" 代表十毫秒。 默认单位是毫秒。

    Duration and delay are expressed as a number and optional time unit, such as "1s" or "10ms" for one second and 10 milliseconds, respectively. The default unit is milliseconds.

  • 缓动效果的值控制该动画在运行期间如何加速和减速。它的取值是 easeease-inease-outease-in-out 之一或一个 cubic-bezier() 函数调用。 如果未提供,则没有缓动效果。

    The easing value controls how the animation accelerates and decelerates during its runtime. Value is one of ease, ease-in, ease-out, ease-in-out, or a cubic-bezier() function call. If not supplied, no easing is applied.

比如,字符串 "1s 100ms ease-out" 指定了一个 1000 毫秒的持续时间,一个 100 毫秒的延迟和一个 "ease-out" 缓动效果,它会快结束时减速。

For example, the string "1s 100ms ease-out" specifies a duration of 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style, which decelerates near the end of the duration.

styles AnimationStyleMetadata | AnimationKeyframesSequenceMetadata

为父动画设置动画样式。 调用 style()keyframes() 函数会返回要应用于父动画中的一组 CSS 样式, 如果为 null,则使用目标状态中的样式,当描述一个某个动画的最后一步时,这很有用。 参见 transitions() 中对"播放到最终状态"的说明。

Sets AnimationStyles for the parent animation. A function call to either style() or keyframes() that returns a collection of CSS style entries to be applied to the parent animation. When null, uses the styles from the destination state. This is useful when describing an animation step that will complete an animation; see "Animating to the final state" in transitions().

可选. 默认值是 null.



AnimationAnimateMetadata: An object that encapsulates the animation step.


在一个 sequence()(动画序列)、group()(动画分组)或 transition()(转场动画)中调用本函数, 以定义一个动画步骤,来把指定的样式数据在父动画上播放指定的时长。

Call within an animation sequence(), group(), or transition() call to specify an animation step that applies given style data to the parent animation for a given amount of time.


Syntax Examples


Timing examples

下面的例子展示了各种 timings(时序)规范。

The following examples show various timings specifications.

  • animate(500):持续 500 毫秒。

    animate(500) : Duration is 500 milliseconds.

  • animate("1s"):持续 1000 毫秒。

    animate("1s") : Duration is 1000 milliseconds.

  • animate("100ms 0.5s"):持续 100 毫秒,延迟 500 毫秒。

    animate("100ms 0.5s") : Duration is 100 milliseconds, delay is 500 milliseconds.

  • animate("5s ease-in"):持续 5000 毫秒,缓动进入(ease-in)。

    animate("5s ease-in") : Duration is 5000 milliseconds, easing in.

  • animate("5s 10ms cubic-bezier(.17,.67,.88,.1)"):持续 5000 毫秒,延迟 10 毫秒,基于一条 Bezier 曲线进行缓动。

    animate("5s 10ms cubic-bezier(.17,.67,.88,.1)") : Duration is 5000 milliseconds, delay is 10 milliseconds, easing according to a bezier curve.


Style examples

下面的例子调用 style() 来设置单个的 CSS 样式。

The following example calls style() to set a single CSS style.

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

下面的例子调用 keyframes() 来为各个相邻的关键帧分别设置 CSS 样式。

The following example calls keyframes() to set a CSS style to different values for successive keyframes.

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