triggerlink

使用说明link

在 @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:

[@triggerName]="expression"

动画触发器绑定会把所有值转换成字符串，然后根据其旧值和当前值匹配出一个转场动画。 对于逻辑值，可以用 '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.

用法范例link

Usage Examplelink

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

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.

      
        content_copy
      
      @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.

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

使用内联函数link

Using an inline functionlink

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

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

      
        content_copy
      
      // 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";
}
    

禁用动画link

Disabling Animationslink

当为真时，则一个特殊的动画控制绑定 @.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:

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

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

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

在整个应用中禁用动画link

Disable animations application-widelink

当模板中的一个区域设置为禁用动画时，其所有内部组件上的动画也会禁用。 也就是说，只要你把 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.

      
        content_copy
      
      import {Component, HostBinding} from '@angular/core';

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

改写内部动画的禁用状态link

Overriding disablement of inner animationslink

不管内部动画禁用与否，父动画总能 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().

检测某个动画何时被禁用link

Detecting when an animation is disabledlink

如果 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.