Angular 离子电容器 |为什么即使是简单的动画也会滞后

Question

我正在使用 Angular 构建一个简单的离子电容器应用程序。
该应用程序包含一些非常简单的动画，我惊讶地发现这些动画非常缓慢：

在应用程序中，我有一个联系人列表。选择联系人时，列表上方的div高度增加，下方列表下推。请参考以下截图。

这个动画是用Ionic自带的实现的animation library:

await this.animationController
    .create()
    .iterations(1)
    .addElement(document.querySelectorAll('.selected-contacts'))
    .duration(150)
    .fromTo('height', '0, '160px').play();

简化HTML:

<div class="container">
   <div class="selected-contacts"><!-- some stuff here --></div>
   <div class="list"> 
      <cdk-virtual-scroll-viewport> 
        <!-- List here --> 
      </cdk-virtual-scroll-viewport> 
   </div>
</div>

播放此动画可以完成工作，但在新的 iPhone Pro 和较旧的 Android 上都有明显的滞后（滞后量几乎相同）。

问题：
一个简单的高度动画不应该在新的 iPhone 上滞后，我做错了什么？会不会是底层 OS 只为 Ionic Capacitor 应用程序分配了一小部分资源？我在这里错过了什么？

免责声明：
我知道用translate，transform少用CPU/GPU因为DOM这里没有重写，但我还是很难接受一个新的iPhone 不能在不延迟的情况下设置高度变化的动画。

Answer 1

动画高度属性在任何框架中都不是高性能的。高度要求浏览器需要 re-layout 整个页面，并且总是会导致卡顿。

有关详细信息，请参阅 CSS-Triggers。

使用 Transforms/Translate3D 之类的东西来创建您正在寻找的效果。

编辑

在关于动画和性能的 past talk from Liam DeBeasi 中添加 link。

Angular 离子电容器 |为什么即使是简单的动画也会滞后

Angular Ionic Capacitor | Why is Even a Simple Animation Laggy

animation

css-animations

ionic-framework

angular

capacitor