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

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.查询是： 如果你没有一个查询而只有多个，那么通过group（...）组合，css选择器将在更深层次上找到元素（'。foo>：nth-​​child（n + 3）.bar'你必须迭代DOM-Tree的很大一部分。 应用于元素的样式和动画在找到元素之后和动画之前发生 - 每次 - 因为我希望它不能由编译器预编译？
• 环境/目标平台：我知道它可能与休闲的Web应用程序无关，但我尝试在具有多个路由器，嵌套组件和大量ngIf的ngFors的大型企业应用程序中思考，以便我个人可以想象查询所有可能的做一些努力。
• 浏览器：我知道浏览器的表现方式不同。我个人目前只对Chrome感兴趣 - 但为了社区，一般的答案会很棒。

如果您有任何重要的信息需要注意，分享（错误，...）会很好

Answer 1

Angular使用web animations api，因此它不会通过JavaScript更改样式属性，因此非常高效。您可以使用HTML 5 Animation Speed Test检查不同动画框架（基于javascript）与CSS的性能。

因此，不同浏览器的性能取决于web animations api的浏览器兼容性（遗憾的是该部分尚未维护）。但是，根据评论here，它在普通浏览器中尚未完全支持，并且正在为Edge / Safari提供polyfilled。