@angular/animations

package 稳定

Implements a domain-specific language (DSL) for defining web animation sequences for HTML elements as multiple transformations over time.

Use this API to define how an HTML element can move, change color, grow or shrink, fade, or slide off the page. These changes can occur simultaneously or sequentially. You can control the timing of each of these transformations. The function calls generate the data structures and metadata that enable Angular to integrate animations into templates and run them based on application states.

Animation definitions are linked to components through the animations property in the @Component metadata, typically in the component file of the HTML element to be animated. The trigger() function encapsulates a named animation, with all other function calls nested within. Use the trigger name to bind the named animation to a specific triggering element in the HTML template.

Angular animations are based on CSS web transition functionality, so anything that can be styled or transformed in CSS can be animated the same way in Angular. Angular animations allow you to:

Set animation timings, styles, keyframes, and transitions.
Animate HTML elements in complex sequences and choreographies.
Animate HTML elements as they are inserted and removed from the DOM, including responsive real-time filtering.
Create reusable animations.
Animate parent and child elements.

Additional animation functionality is provided in other Angular modules for animation testing, for route-based animations, and for programmatic animation controls that allow an end user to fast forward and reverse an animation sequence.

参见

Find out more in the animations guide.
See what polyfills you might need in the browser support guide.

入口点

主要

@angular/animations

Implements a domain-specific language (DSL) for defining web animation sequences for HTML elements as multiple transformations over time.

次要

`@angular/animations/browser`
`@angular/animations/browser/testing`

导出列表

类

`AnimationBuilder`	AnimationBuilder is an injectable service that is available when the BrowserAnimationsModule or NoopAnimationsModule modules are used within an application.
`AnimationFactory`	An instance of `AnimationFactory` is returned from AnimationBuilder.build.
`NoopAnimationPlayer`

函数

`animate`	Defines an animation step that combines styling information with timing information. 定义一个动画步骤，它把一些样式信息和时序信息组合在一起。
`animateChild`	Executes a queried inner animation element within an animation sequence. 在一个动画序列中执行一个查询到的内部动画元素。
`animation`	Produces a reusable animation that can be invoked in another animation or sequence, by calling the `useAnimation()` function. 生成一个可复用的动画，可以在其它动画或序列中通过 `useAnimation()` 函数进行调用。
`group`	Defines a list of animation steps to be run in parallel. 定义一个可以并行运行的动画步骤列表。
`keyframes`	Defines a set of animation styles, associating each style with an optional `offset` value. 可定义一组动画样式，每个样式都关联着一个可选的 `offset` 值。
`query`	Finds one or more inner elements within the current element that is being animated within a sequence. Use with `animateChild()`. 在动画序列中正在播放的元素中查找一个或多个内部元素。和 `animateChild()` 一起使用。
`sequence`	Defines a list of animation steps to be run sequentially, one by one. 定义一个动画步骤列表，逐个依次运行它们。
`stagger`	Use within an animation `query()` call to issue a timing gap after each queried item is animated. 在调用 `query()` 中使用可以在每个查询到的条目开始播放动画之后插入一个时间间隔。
`state`	Declares an animation state within a trigger attached to an element. 在附加到元素的触发器上，声明一个动画状态。
`style`	Declares a key/value object containing CSS properties/styles that can then be used for an animation `state`, within an animation `sequence`, or as styling data for calls to `animate()` and `keyframes()`. 声明一个包含 CSS 属性/样式的键值对象，可在动画序列中用作动画状态（`state`），或在调用 `animate()` 和 `keyframes()` 时作为传入的样式数据。
`transition`	Declares an animation transition as a sequence of animation steps to run when a given condition is satisfied. The condition is a Boolean expression or function that compares the previous and current animation states, and returns true if this transition should occur. When the state criteria of a defined transition are met, the associated animation is triggered. 声明一个转场动画，以便在满足给定条件时运行一系列动画步骤。该条件是一个逻辑型表达式或一个函数，该函数比较以前和现在的动画状态，如果应该开始转场则返回 `true`。当满足所定义的转场动画的状态标准时，就会开始执行相关的动画。
`trigger`	Creates a named animation trigger, containing a list of `state()` and `transition()` entries to be evaluated when the expression bound to the trigger changes. 创建一个有名字的动画触发器，包含一个 `state()` 和 `transition()` 的列表，当此触发器的绑定表达式发生变化时，它们就会重新求值。
`useAnimation`	Starts a reusable animation that is created using the `animation()` function. 启动一个使用 `animation()` 函数创建的可复用动画。

结构

`AnimationEvent`
`AnimateChildOptions`	Adds duration options to control animation styling and timing for a child animation. 添加持续时间选项，以控制子动画的动画样式和时序。
`AnimationAnimateChildMetadata`	Encapsulates a child animation, that can be run explicitly when the parent is run. Instantiated and returned by the `animateChild` function. 封装一个子动画，父动画可以显式的运行它。由 `animateChild` 函数进行初始化和返回。
`AnimationAnimateMetadata`	Encapsulates an animation step. Instantiated and returned by the `animate()` function. 封装一个动画步骤。由 `animate()` 函数进行实例化并返回。
`AnimationAnimateRefMetadata`	Encapsulates a reusable animation. Instantiated and returned by the `useAnimation()` function. 封装一个可复用的动画。由 `useAnimation()` 函数实例化并返回。
`AnimationGroupMetadata`	Encapsulates an animation group. Instantiated and returned by the `group()` function. 封装一个动画组。由 `group()` 函数实例化并返回。
`AnimationKeyframesSequenceMetadata`	Encapsulates a keyframes sequence. Instantiated and returned by the `keyframes()` function. 封装一个关键帧序列。由 `keyframes()` 函数进行实例化并返回。
`AnimationMetadata`	Base for animation data structures. 动画数据结构的基类。
`AnimationMetadataType`	Constants for the categories of parameters that can be defined for animations. 一组可以为动画定义参数类别的常量。
`AnimationOptions`	Options that control animation styling and timing. 用来控制动画样式和时序的选项。
`AnimationQueryMetadata`	Encapsulates an animation query. Instantiated and returned by the `query()` function. 封装一个动画查询。由 `query()` 函数实例化并返回。
`AnimationQueryOptions`	Encapsulates animation query options. Passed to the `query()` function. 封装一些动画查询选项。传给 `query()` 函数。
`AnimationReferenceMetadata`	Encapsulates a reusable animation, which is a collection of individual animation steps. Instantiated and returned by the `animation()` function, and passed to the `useAnimation()` function. 封装一个可复用的动画，包括一组独立的动画步骤。由 `animation()` 函数返回，并传给 `useAnimation()` 函数。
`AnimationSequenceMetadata`	Encapsulates an animation sequence. Instantiated and returned by the `sequence()` function. 封装一个动画序列。由 `sequence()` 函数进行实例化并返回。
`AnimationStaggerMetadata`	Encapsulates parameters for staggering the start times of a set of animation steps. Instantiated and returned by the `stagger()` function. 封装一组动画步骤的起始时间的交错参数。由 `stagger()` 函数实例化并返回。
`AnimationStateMetadata`	Encapsulates an animation state by associating a state name with a set of CSS styles. Instantiated and returned by the `state()` function. 通过将状态名称和一组 CSS 样式相关联来封装一个动画状态。由 `state()` 函数实例化并返回。
`AnimationStyleMetadata`	Encapsulates an animation style. Instantiated and returned by the `style()` function. 封装一个动画样式。由 `style()` 函数实例化并返回。
`AnimationTransitionMetadata`	Encapsulates an animation transition. Instantiated and returned by the `transition()` function. 封装一个转场动画。由 `transition()` 函数实例化并返回。
`AnimationTriggerMetadata`	Contains an animation trigger. Instantiated and returned by the `trigger()` function. 包含一个动画触发器。由 `trigger()` 函数实例化并返回。
`AnimationPlayer`	AnimationPlayer controls an animation sequence that was produced from a programmatic animation. (see AnimationBuilder for more information on how to create programmatic animations.)

类型

AUTO_STYLE

Specifies automatic styling.

用于指定自动化样式。

AnimateTimings

Represents animation-step timing parameters for an animation step.

表示一个动画步骤中的动画时序参数。

参见link

入口点link

主要link

次要link

导出列表link

类link

函数link

结构link

类型link

参见

入口点

主要

次要

导出列表

类

函数

结构

类型