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

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({...}))
]

进一步的想法：

如果您没有一个查询而是多个查询，它们通过 group(...) 组合，并且 css 选择器将在更深层次上查找元素 ( '.foo > :nth-child(n+3) .bar' ) 你必须遍历 DOM 树的很大一部分。
应用于元素的样式和动画发生在找到元素之后和动画之前 - 每次 - 因为我期望它不能被编译器预编译？

环境/目标平台：我知道它可能与随便的 Web 应用程序无关，但我尝试在具有多个路由器、嵌套组件和大量 ngIf 的 ngFors 的大型企业应用程序中思考，因此我个人可以想象查询所有可能努力一点。
浏览器：我知道浏览器的行为不同。就个人而言，我目前只对 Chrome 感兴趣 - 但为了社区的缘故，一般的答案会很棒。

如果您有任何需要注意的更多信息，很高兴分享（错误，...）

score 6 · Accepted Answer

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

因此，不同浏览器中的性能取决于网络动画 api的浏览器兼容性（不幸的是，该部分尚未维护）。但是，根据这里的评论，通用浏览器尚未完全支持它，并且正在为 Edge/Safari进行填充。

1 回答 1