css - Angular 动画性能状态/转换与查询

Question

我目前正在处理 Angular 动画。因此我想出了两种可能的方法来将动画附加到组件。在下文中，我将它们描述为状态/转换动画和查询动画。

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

---

<强>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。