linkquery
npm Package | @angular/animations |
---|---|
Module | import { query } from '@angular/animations'; |
Source | animations/src/animation_metadata.ts |
function query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options: AnimationQueryOptions | null = null): AnimationQueryMetadata;
linkDescription
query
is an animation-specific function that is designed to be used inside of Angular's
animation DSL language.
query() is used to find one or more inner elements within the current element that is being animated within the sequence. The provided animation steps are applied to the queried element (by default, an array is provided, then this will be treated as an animation sequence).
linkUsage
query() is designed to collect mutiple elements and works internally by using
element.querySelectorAll
. An additional options object can be provided which
can be used to limit the total amount of items to be collected.
query('div', [
animate(...),
animate(...)
], { limit: 1 })
query(), by default, will throw an error when zero items are found. If a query
has the optional
flag set to true then this error will be ignored.
query('.some-element-that-may-not-be-there', [
animate(...),
animate(...)
], { optional: true })
linkSpecial Selector Values
The selector value within a query can collect elements that contain angular-specific characteristics using special pseudo-selectors tokens.
These include:
- Querying for newly inserted/removed elements using
query(":enter")
/query(":leave")
- Querying all currently animating elements using
query(":animating")
- Querying elements that contain an animation trigger using
query("@triggerName")
- Querying all elements that contain an animation triggers using
query("@*")
- Including the current element into the animation sequence using
query(":self")
Each of these pseudo-selector tokens can be merged together into a combined query selector string:
query(':self, .record:enter, .record:leave, @subTrigger', [...])
linkDemo
@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';
}
}