query

function

在动画序列中正在播放的元素中查找一个或多个内部元素。和 animateChild() 一起使用。

Finds one or more inner elements within the current element that is being animated within a sequence. Use with animate().

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

参数

selector

string

要查询的元素，或一组具有 Angular 中定义的某些特征的一组元素，可以用如下令牌（token）进行指定：

The element to query, or a set of elements that contain Angular-specific characteristics, specified with one or more of the following tokens.

query(":enter") 或 query(":leave")：查询新插入或移除的元素。
query(":enter") or query(":leave") : Query for newly inserted/removed elements.
query(":animating")：查询所有正在播放动画的元素。
query(":animating") : Query all currently animating elements.
query("@triggerName")：查询包含指定动画触发器的元素。
query("@triggerName") : Query elements that contain an animation trigger.
query("@*")：查询所有包含任意动画触发器的元素。
query("@*") : Query all elements that contain an animation triggers.
query(":self")：把当前元素包含到动画序列中。
query(":self") : Include the current element into the animation sequence.

animation

AnimationMetadata | AnimationMetadata[]

要应用到所查询到的单个或一组元素上的一个或多个动画步骤。该数组会被视为一个动画序列。

One or more animation steps to apply to the queried element or elements. An array is treated as an animation sequence.

options

AnimationQueryOptions

一个配置对象。使用 limit 字段来限制要收集的条目的数量上限。

An options object. Use the 'limit' field to limit the total number of items to collect.

可选. 默认值是 null.

返回值

一个封装了查询数据的对象。

AnimationQueryMetadata: An object that encapsulates the query data.

使用说明

多个令牌可以合并成复合查询选择器。比如：

Tokens can be merged into a combined query selector string. For example:

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

query() 函数会收集多个元素，其内部是用 element.querySelectorAll 实现的。用配置对象中的 limit 字段可以限制要收集的总数。比如：

The query() function collects multiple elements and works internally by using element.querySelectorAll. Use the limit field of an options object to limit the total number of items to be collected. For example:

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

默认情况下，当没有找到条目时就会抛出错误。设置 optional 标志可以忽略此错误。比如：

By default, throws an error when zero items are found. Set the optional flag to ignore this error. For example:

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

使用范例

Usage Example

下面的例子查询内部元素，并用 animateChild() 来独立控制它们的动画。

The following example queries for inner elements and animates them individually using animate().

      
      @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';
  }
}

参数

返回值

使用说明link

使用范例link

Usage Examplelink

使用说明

使用范例

Usage Example