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

Posted 2023-03-06

【中文标题】角度动画性能状态/转换与查询

【英文标题】：Angular Animation Performance State/Transition vs Query

【发布时间】：2019-07-05 02:54:59

【问题描述】：

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

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

---

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 点有关。查询

是：

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

环境/目标平台：我知道它可能与普通的 Web 应用程序无关，但我尝试在具有多个路由器、嵌套组件和大量 ngIf 的 ngFors 的大型企业应用程序中思考，所以我个人可以想象，查询所有这些可能是一些努力。

浏览器：我知道浏览器的行为不同。就我个人而言，我目前只对 Chrome 感兴趣 - 但为了社区，一般的答案会很棒。

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

【问题讨论】：

您是否尝试过在开发工具中记录这两个选项的性能？

我试图提供一个包含大量 div 的新原型应用程序，但这并没有产生任何可数的结果。所以一般的问题是查询/状态动画到底发生了什么，然后我们可以进一步考虑是否有任何性能影响。

【参考方案1】：

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

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

【讨论】：

感谢您提供有趣的答案，但实际上它并没有尝试回答我的问题，据我所知您是正确的。我不想知道角度动画/网络动画本身的速度比较/估计，我想知道是否有关于性能的建议（如果有的话，还有其他事实）关于我是否使用角度查询动画爬下 dom 树还是我使用状态。状态是否已预编译，因此我不需要搜索元素等...如果我需要澄清问题，请告诉我。

@JonathanStellwag 抱歉，根据您的帖子，我没有弄清楚这一点。为什么要比较两种方法？你实现了两件不同的事情。在第一种方法中，您将其应用于父 div 容器，在第二种方法中，您将动画应用于子项，然后询问为 n 个生成的子项使用动画的性能。我的假设不正确吗？

我试图找到使用角度动画库实现动画的最佳方法。因此，我最关心的是性能，以及每种“类型”动画的稳定性。我会澄清我的问题。使用这两种方法可以获得相同的动画效果。

这个问题的赏金可能太少了 :) 但我很感激你 - 要回答这个问题需要付出很大的努力。但也许未来的我或过去的某个人已经有同样的想法，可以回答这个问题。如果我收到任何消息或有时间建立测试环境，我也会回复这个问题，以提供一些有用的信息。

感谢您提供有关角度动画的有用信息，但我不能接受这个问题的答案，因为它没有回答具体问题。不过，我感谢您对您提供给我们的重要信息的回答！谢谢。