角动画性能状态/过渡与查询

问题描述

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

I am currently working with angular animations. Therefore I figured out two possible methods to attach animations to components. In the following I am describing them as State/Transition-Animations and 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 。查询是：

• My main concern with point 2. Query is that:

1. 如果您没有一个查询，但有多个查询，则将通过group（...）组合在一起，并且CSS选择器将在更深的层次上查找元素（'。foo>：nth-​​child（n +3）.bar'），您必须遍历DOM树的很大一部分。


2. 应用于元素的样式和动画是在找到元素之后发生的在动画之前-每次-因为我希望它不能被编译器预先编译？

1. If you do not have one query but multiple, wich are combined via group(...) and the css selector is going to finde elements on a deeper level ('.foo > :nth-child(n+3) .bar') you have to iterade over a very big part of the DOM-Tree.
2. The stylings and animation applied to the elements happens after finding the element and before the animation - everytime - because I expect, that it cannot be pre-compiled by the compiler?

环境/目标平台：我知道它可能与休闲的Web应用程序无关，但我尝试在具有多个路由器，嵌套组件和大量ngIf ngFors的大型企业应用程序中进行思考，因此我个人可以想象

Environment/Target platform: I know it's might not related to a casual Web-Application, but I try to think in big enterprise applications with multiple router, nested components and lots of ngIf's ngFors, so that I personally can imagine that querying all that could be some effort.

浏览器：我知道浏览器的行为有所不同。就我个人而言，目前我仅对Chrome感兴趣-但是对于社区而言，一般性的回答将非常棒。

Browser: I know that browser differently behave differently. Personally I am interested only in Chrome for the moment - But for the sake of community a general answer would be awesome.

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

推荐答案

Angular使用，因此它不会通过JavaScript更改样式属性，因此性能相当出色。您可以通过来检查不同动画框架（基于javascript）与CSS的性能。一个>。

Angular uses the web animations api, so it's not changing style properties through JavaScript and is therefore quite performant. You can check the performance of different animation frameworks (javascript-based) vs CSS with the HTML 5 Animation Speed Test.

因此，不同浏览器中的性能取决于（很遗憾，此部分尚未维护）。但是，根据评论，目前尚未得到普通浏览器的完全支持，并且正在用于Edge / Safari。

The performance in different browsers is therefore dependent on the browser compatibility of the web animations api (unfortunately the section is not being maintained yet). But, according to the comment here, it is not fully supported yet across common browsers and is being polyfilled for Edge/Safari.

这篇关于角动画性能状态/过渡与查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！