Question

我目前正在处理角度动画。因此，我想出了两种将动画附加到组件的可能方法。在下面，我将它们描述为状态/过渡动画和查询动画。

在这个问题上，我主要想知道在采用一种或另一种方式时是否存在性能差异！？

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树的很大一部分。
2. 应用于元素的样式和动画发生在找到元素之后且每次出现动画之前-因为我希望不能由编译器对其进行预编译？
环境/目标平台：我知道它可能与休闲的Web应用程序无关，但是我尝试在具有多个路由器，嵌套组件和大量ngIf的大型企业应用程序中进行思考ngFors，这样我个人就可以想象查询所有内容都需要一定的努力。
浏览器：：我知道浏览器的行为不同。就我个人而言，目前我仅对Chrome感兴趣-但是对于社区而言，一般性的回答将非常棒。

如果您还有其他需要注意的信息，可以分享（错误，...）

Answer 1

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

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