angular 动画 query用法

query API 翻译

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

描述

query是一个动画特效function被用于angular的动画DSL领域语言
query()被用于找到当前元素内部一个或多个元素，使其顺序执行动画。
已提供好的动画步骤被应用到序列元素上（缺省下，提供一个数组，它被看成一个动画序列）

用法

query()通过 element.querySelectorAll 来收集多个元素和工作。
另一个参数对象可以限制被收集的个数。

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(),缺省下，没有元素被找到时，返回error。如果optional设置为true，则忽略error

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

特殊选择器

这种语法可以帮助筛选出特殊的元素
包括:
- 新插入 新移除元素 使用 query(“:enter”)/query(“:leave”)
- 当前所有正在动的元素 使用 query(“:animating”)
- 包含一个trigger动画触发器的元素 使用 query(“@triggerName”)
-包含动画触发器的所有元素 使用query(“@*”)
- 将当前元素包含到动画序列中 使用query(“:self”)
这些查询结果都可以合并成一个大字符串的写法

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

实例

@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',// animate the inner elements in,one by one query('h1',animate(1000,style({ opacity: 1 })),]) ]) ] }) class Cmp { exp = ''; goAnimate() { this.exp = 'goAnimate'; } }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!