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

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() 的列表，当此触发器的绑定表达式发生变化时，它们就会重新求值。

trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata

参数

name

An identifying string.

一个标识字符串。

definitions

An animation definition object, containing an array of state() and transition() declarations.

一个动画定义对象，包含由 state() 和 transition() 声明构成的数组。

返回值

AnimationTriggerMetadata: An object that encapsulates the trigger data.

用于包装该触发器数据的对象。

使用说明

Define an animation trigger in the animations section of @Component metadata. In the template, reference the trigger by name and bind it to a trigger expression that evaluates to a defined animation state, using the following format:

在 @Component 元数据的 animations 部分定义一个动画触发器。 在模板中，可以按名字引用该触发器，并把它绑定到一个触发器表达式，该表达式的求值结果是一个已定义的动画状态，格式如下：

[@triggerName]="expression"

Animation trigger bindings convert all values to strings, and then match the previous and current values against any linked transitions. Booleans can be specified as 1 or true and 0 or false.

动画触发器绑定会把所有值转换成字符串，然后根据其旧值和当前值匹配出一个转场动画。 对于逻辑值，可以用 '1' 或 'true' 来代表 true，用 '0' 或 'false' 来代表 false。

Usage Example

用法范例

The following example creates an animation trigger reference based on the provided name value. The provided animation value is expected to be an array consisting of state and transition declarations.

下面的例子使用指定的名字创建了一个动画触发器的引用。 此动画的值应该是一个由状态声明和转场声明组成的数组。

@Component({ selector: "my-component", templateUrl: "my-component-tpl.html", animations: [ trigger("myAnimationTrigger", [ state(...), state(...), transition(...), transition(...) ]) ] }) class MyComponent { myStatusExp = "something"; }

The template associated with this component makes use of the defined trigger by binding to an element within its template code.

该组件的相关模板通过在代码中把一个已定义的触发器绑定到一个元素上来使用此动画。

<!-- somewhere inside of my-component-tpl.html --> <div [@myAnimationTrigger]="myStatusExp">...</div>

Using an inline function

使用内联函数

The transition animation method also supports reading an inline function which can decide if its associated animation should be run.

transition 动画方法也支持读取内联函数，该函数可以决定是否应该运行相关的动画。

// this method is run each time the `myAnimationTrigger` trigger value changes. function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key: string]: any}): boolean { // notice that `element` and `params` are also available here return toState == 'yes-please-animate'; } @Component({ selector: 'my-component', templateUrl: 'my-component-tpl.html', animations: [ trigger('myAnimationTrigger', [ transition(myInlineMatcherFn, [ // the animation sequence code ]), ]) ] }) class MyComponent { myStatusExp = "yes-please-animate"; }

Disabling Animations

禁用动画

When true, the special animation control binding @.disabled binding prevents all animations from rendering. Place the @.disabled binding on an element to disable animations on the element itself, as well as any inner animation triggers within the element.

当为真时，则一个特殊的动画控制绑定 @.disabled 将会在渲染时阻止所有动画。 把 @.disabled 绑定放在元素上可以防止触发该元素自身的动画，及其子元素上的所有动画触发器。

The following example shows how to use this feature:

下面的例子展示了如何使用此特性：

@Component({ selector: 'my-component', template: ` <div [@.disabled]="isDisabled"> <div [@childAnimation]="exp"></div> </div> `, animations: [ trigger("childAnimation", [ // ... ]) ] }) class MyComponent { isDisabled = true; exp = '...'; }

When @.disabled is true, it prevents the @childAnimation trigger from animating, along with any inner animations.

当 @.disabled 为 true 时，它会阻止 @childAnimation 触发器等任何内部动画。

Disable animations application-wide

在整个应用中禁用动画

When an area of the template is set to have animations disabled, all inner components have their animations disabled as well. This means that you can disable all animations for an app by placing a host binding set on @.disabled on the topmost Angular component.

当模板中的一个区域设置为禁用动画时，其所有内部组件上的动画也会禁用。 也就是说，只要你把 Angular 根组件上放一个 @.disabled 的宿主绑定即可。

import {Component, HostBinding} from '@angular/core'; @Component({ selector: 'app-component', templateUrl: 'app.component.html', }) class AppComponent { @HostBinding('@.disabled') public animationsDisabled = true; }

Overriding disablement of inner animations

改写内部动画的禁用状态

Despite inner animations being disabled, a parent animation can query() for inner elements located in disabled areas of the template and still animate them if needed. This is also the case for when a sub animation is queried by a parent and then later animated using animateChild().

不管内部动画禁用与否，父动画总能 query() 模板里已禁用区域中的内部元素，如果需要，也可以播放它们。 还有一种方式是当父动画查询到子动画后，用 animateChild() 来播放它。

Detecting when an animation is disabled

检测某个动画何时被禁用

If a region of the DOM (or the entire application) has its animations disabled, the animation trigger callbacks still fire, but for zero seconds. When the callback fires, it provides an instance of an AnimationEvent. If animations are disabled, the .disabled flag on the event is true.

如果 DOM 中的某个区域（或整个应用程序）的动画被禁用时，动画触发器的回调仍然会触发，但持续 0 秒。 当回调被触发时，它会提供一个 AnimationEvent 的例子。如果动画被禁用了，则该事件上的 .disabled 标志为 true。