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

animation

Produces a reusable animation that can be invoked in another animation or sequence, by calling the useAnimation() function.

生成一个可复用的动画，可以在其它动画或序列中通过 useAnimation() 函数进行调用。

animation(steps: AnimationMetadata | AnimationMetadata[], options: AnimationOptions | null = null): AnimationReferenceMetadata

参数

steps

One or more animation objects, as returned by the animate() or sequence() function, that form a transformation from one state to another. A sequence is used by default when you pass an array.

一个或多个由 animate() 或 sequence() 函数返回的动画对象，用于描述从一个状态到另一个状态的转变过程。 当传入一个数组时，默认当做一个动画序列使用。

options

An options object that can contain a delay value for the start of the animation, and additional developer-defined parameters. Provided values for additional parameters are used as defaults, and override values can be passed to the caller on invocation.

一个配置对象，可以包含一个开始动画之前的延迟值，和一些由开发人员定义的参数。在这些参数中提供的值会被用作样式的默认值， 在调用时调用者可以重写这些值。

可选. 默认值是 null.

返回值

AnimationReferenceMetadata: An object that encapsulates the animation data.

一个封装了动画数据的对象。

使用说明

The following example defines a reusable animation, providing some default parameter values.

下面的例子定义了一个可复用的动画，提供了一些默认的参数值。

var fadeAnimation = animation([ style({ opacity: '{{ start }}' }), animate('{{ time }}', style({ opacity: '{{ end }}'})) ], { params: { time: '1000ms', start: 0, end: 1 }});

The following invokes the defined animation with a call to useAnimation(), passing in override parameter values.

下面的例子通过 useAnimation() 执行了一个已定义的动画，并传入了一些参数值来改写默认参数。

useAnimation(fadeAnimation, { params: { time: '2s', start: 1, end: 0 } })

If any of the passed-in parameter values are missing from this call, the default values are used. If one or more parameter values are missing before a step is animated, useAnimation() throws an error.

如果本调用传入的参数中缺少了任何一个参数值，则会使用其默认值代替。 如果在某个动画步骤开始播放前缺少了一个或多个参数值，则会抛出一个错误。