填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

query

在動畫序列中正在播放的元素中查詢一個或多個內部元素。和 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';
  }
}