创建一个有名字的动画触发器,包含一个 state()transition() 的列表,当此触发器的绑定表达式发生变化时,它们就会重新求值。

Creates a named animation trigger, containing a list of state() and transition() entries to be evaluated when the expression bound to the trigger changes.

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


An identifying string.

definitions AnimationMetadata[]

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

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



AnimationTriggerMetadata: An object that encapsulates the trigger data.


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

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:


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

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.


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"; }
  1. @Component({
  2. selector: "my-component",
  3. templateUrl: "my-component-tpl.html",
  4. animations: [
  5. trigger("myAnimationTrigger", [
  6. state(...),
  7. state(...),
  8. transition(...),
  9. transition(...)
  10. ])
  11. ]
  12. })
  13. class MyComponent {
  14. myStatusExp = "something";
  15. }


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


Using an inline function

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

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

// 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"; }
  1. // this method is run each time the `myAnimationTrigger` trigger value changes.
  2. function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
  3. string]: any}): boolean {
  4. // notice that `element` and `params` are also available here
  5. return toState == 'yes-please-animate';
  6. }
  8. @Component({
  9. selector: 'my-component',
  10. templateUrl: 'my-component-tpl.html',
  11. animations: [
  12. trigger('myAnimationTrigger', [
  13. transition(myInlineMatcherFn, [
  14. // the animation sequence code
  15. ]),
  16. ])
  17. ]
  18. })
  19. class MyComponent {
  20. myStatusExp = "yes-please-animate";
  21. }


Disabling Animations

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

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.


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 = '...'; }
  1. @Component({
  2. selector: 'my-component',
  3. template: `
  4. <div [@.disabled]="isDisabled">
  5. <div [@childAnimation]="exp"></div>
  6. </div>
  7. `,
  8. animations: [
  9. trigger("childAnimation", [
  10. // ...
  11. ])
  12. ]
  13. })
  14. class MyComponent {
  15. isDisabled = true;
  16. exp = '...';
  17. }

@.disabledtrue 时,它会阻止 @childAnimation 触发器等任何内部动画。

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


Disable animations application-wide

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

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.

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

  selector: 'app-component',
  templateUrl: 'app.component.html',
class AppComponent {
  public animationsDisabled = true;


Overriding disablement of inner animations

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

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


Detecting when an animation is disabled

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

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.