function
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 | The element to query, or a set of elements that contain Angular-specific characteristics, specified with one or more of the following tokens.
|
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 |
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', [...])
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 })
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 })
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'; } }
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/animations/query