angular 动画 query用法

query API 翻译

function query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options: AnimationQueryOptions | null = null): AnimationQueryMetadata;

描述

query是一个动画特效function被用于angular的动画DSL领域语言
query()被用于找到当前元素内部一个或多个元素，使其顺序执行动画。
已提供好的动画步骤被应用到序列元素上（缺省下，提供一个数组，它被看成一个动画序列）

用法

query()通过 element.querySelectorAll 来收集多个元素和工作。
另一个参数对象可以限制被收集的个数。

query('div', [
  animate(...),
  animate(...)
], { limit: 1 })

query(), by default, will throw an error when zero items are found. If a query has the optional flag set to true then this error will be ignored.
query(),缺省下，没有元素被找到时，返回error。如果optional设置为true，则忽略error

query('.some-element-that-may-not-be-there', [
  animate(...),
  animate(...)
], { optional: true })

特殊选择器

这种语法可以帮助筛选出特殊的元素
包括:
- 新插入 新移除元素 使用 query(“:enter”)/query(“:leave”)
- 当前所有正在动的元素 使用 query(“:animating”)
- 包含一个trigger动画触发器的元素 使用 query(“@triggerName”)
-包含动画触发器的所有元素 使用query(“@*”)
- 将当前元素包含到动画序列中 使用query(“:self”)
这些查询结果都可以合并成一个大字符串的写法

query(':self, .record:enter, .record:leave, @subTrigger', [...])

实例

@Component({
  selector: 'inner',
  template: `
    <div [@queryAnimation]="exp">
      <h1>Title</h1>
      <div class="content">
        Blah blah blah
      </div>
    </div>
  `,
  animations: [
   trigger('queryAnimation', [
     transition('* => goAnimate', [
       // hide the inner elements
       query('h1', style({ opacity: 0 })),
       query('.content', style({ opacity: 0 })),

       // animate the inner elements in, one by one
       query('h1', animate(1000, style({ opacity: 1 })),
       query('.content', animate(1000, style({ opacity: 1 })), ])
   ])
 ]
})
class Cmp {
  exp = '';

  goAnimate() {
    this.exp = 'goAnimate';
  }
}