querylink

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

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

Parameters

selector	string	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") or query(":leave") : Query for newly inserted/removed elements. query(":animating") : Query all currently animating elements. query("@triggerName") : Query elements that contain an animation trigger. query("@*") : Query all elements that contain an animation triggers. 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	An options object. Use the 'limit' field to limit the total number of items to collect. Optional. Default is null.

Returns

AnimationQueryMetadata: An object that encapsulates the query data.

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

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

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

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