模板语法
服务端渲染
API / @angular/animations

query

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

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

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

参数

selector

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

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

  • query(":enter") or query(":leave") : Query for newly inserted/removed elements.

    query(":enter") 或 query(":leave")：查询新插入或移除的元素。

  • query(":animating") : Query all currently animating elements.

    query(":animating")：查询所有正在播放动画的元素。

  • query("@triggerName") : Query elements that contain an animation trigger.

    query("@triggerName")：查询包含指定动画触发器的元素。

  • query("@*") : Query all elements that contain an animation triggers.

    query("@*")：查询所有包含任意动画触发器的元素。

  • query(":self") : Include the current element into the animation sequence.

    query(":self")：把当前元素包含到动画序列中。

animation

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

要应用到所查询到的单个或一组元素上的一个或多个动画步骤。

options

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

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

可选. 默认值是 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', [...])

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

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:

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

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

Usage Example

使用范例

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

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

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