模板语法
服务端渲染
API / @angular/animations

animate

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

定义一个动画步骤，它把一些样式信息和时序信息组合在一起。

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

参数

timings

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

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

  • 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.

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

  • 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.

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

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.

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

styles

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().

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

可选. 默认值是 null.

返回值

AnimationAnimateMetadata: An object that encapsulates the animation step.

一个用于封装动画步骤的对象。

使用说明

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.

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

Syntax Examples

语法范例

Timing examples

时序范例

The following examples show various timings specifications.

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

  • animate(500) : Duration is 500 milliseconds.

    animate(500)：持续 500 毫秒。

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

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

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

    animate("100ms 0.5s")：持续 100 毫秒，延迟 500 毫秒。

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

    animate("5s ease-in")：持续 5000 毫秒，缓动进入（ease-in）。

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

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

Style examples

样式范例

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

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

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

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

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

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