Angular query()用法

[deepthan]

query: 选取元素，并添加动画

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

• selector ： 要选取的元素，选取方式和原生的一样。
• animation ： 要进行的动画序列，一个或多个。

作用：

在处于动画序列的元素内部查找一个或多个元素，这些元素也会被加入当前动画序列中，不过一般会重新写一个数组来重新定义选取元素的动画序列。

用法：

1） 选取元素并可以限制数量
query()函数源码中使用了element.querySelectorAll因此他可以选取多个元素，所以我们在选取元素的时候可以加上一个 limit 来限制选取的数量。

// 在class为 demo的div里找一个div，找到的是 demo1,如果 limit为2 的话找到的是 [demo1, demo2]。
template: `
  <div [@queryDemo] class='demo'>
    <div class='demo1'></div>
    <div class='demo2'></div>
  </div>
`,
animations: [
   trigger('queryDemo', [
     transition('void => *', [
          query( 'div', animate(...), {limit: 1} )
     ])
   ]
]

2） 开/ 关报错功能
默认情况下如果选取的元素找不到则 query（）函数会报错，设置optional选项为 true 则或忽略错误。

query('.demo-not-be-there', [
  animate(...),
  animate(...)
], { optional: true })

选择器的特殊值

query（）函数里面用伪选择器可以选出特定的元素：

• query(":enter")/query(":leave") : 选取新插入 / 移除的元素
• query(":animating") : 选取所有正在进行动画的元素
• query("@triggerName") ： 选取有特定触发器的元素
• query("@*") ： 选取所有具有触发器的元素
• query(":self") ： 把当前元素增加到动画序列中

多个伪选择器可以合在一起组成选择器查询字符串:

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

demo

@Component({
  selector: 'inner',
  template: `
    <div [@queryAnimation]="exp">
      <h1>Title</h1>
      <div class="content">
        Blah blah blah
      </div>
    </div>
  `,
  animations: [
   trigger('queryAnimation', [
     transition('* => goAnimate', [
       // 隐藏里面的元素
       query('h1', style({ opacity: 0 })),
       query('.content', style({ opacity: 0 })),
 
       // 一个一个地执行里面元素的动画
       query('h1', animate(1000, style({ opacity: 1 })),
       query('.content', animate(1000, style({ opacity: 1 })),
     ])
   ])
 ]
})
class Cmp {
  exp = '';
 
  goAnimate() {
    this.exp = 'goAnimate';
  }
}