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

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 的评论，它还没有在普通浏览器中得到完全支持，并且在 Edge/Safari 上是 polyfilled。