角度动画性能状态/转换与查询

Question

我目前正在使用角动画.因此,我想出了将动画附加到组件的两种可能方法.在下文中,我将它们描述为State/Transition-Animations和Query-Animations.

在这个问题中,我主要想知道一种或另一种方式是否存在性能差异!？

---

1.状态/过渡动画

html的

<div [@animation_foo]/>

.TS

trigger('animation_foo', [
    state('true', style({...}),
    state('false', style({...})       
    transition('true => false', animate(...)
]

---

2.查询动画

html的

<div [@animation_foo]>
    <div class="bar"/>
</div>

.TS

trigger('animation_foo', [
    query('.bar', style({...}), animate('10ms', style({...}))
]

---

进一步思考:

• 我主要关心点2.查询是:

  1. 如果你没有一个查询而只有多个,那么通过group(...)组合,css选择器将在更深层次上找到元素('.foo>:nth-​​child(n + 3).bar'你必须迭代DOM-Tree的很大一部分.
  2. 应用于元素的样式和动画在找到元素之后和动画之前发生 - 每次 - 因为我期望它不能由编译器预编译？

• 环境/目标平台:我知道它可能与休闲Web应用程序无关,但我尝试在具有多个路由器,嵌套组件和大量ngIf的ngFors的大型企业应用程序中思考,以便我个人可以想象查询所有可能的做一些努力.

• 浏览器:我知道浏览器的行为方式不同.我个人目前只对Chrome感兴趣 - 但为了社区,一般的答案会很棒.

如果您有任何重要的信息需要注意,分享(错误,...)会很好

Answer 1

Angular使用web动画api,因此它不会通过JavaScript更改样式属性,因此非常高效.您可以使用HTML 5动画速度测试检查不同动画框架(基于javascript)与CSS的性能.

因此,不同浏览器中的性能取决于Web动画api的浏览器兼容性(遗憾的是该部分尚未维护).但是,根据这里的评论,它在普通浏览器中尚未得到完全支持,并且正在为Edge/Safari 进行填充.