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

Question

我正在使用 Angular 构建一个简单的 Ionic Capacitor 应用程序。
该应用程序包含一些非常简单的动画，我惊讶地发现这些动画非常滞后：

在应用程序中，我有一个联系人列表。 When a contact is selected, the height of a div above the list is increased, and the list below is pushed down.请参考下面的截图。

这个动画是使用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 上滞后，我做错了什么？难道底层操作系统只分配了一小部分资源给离子电容器应用程序？我在这里错过了什么？

免责声明：
我知道使用 translate、transform 使用的 CPU/GPU 更少，因为这里没有重写 DOM，但我仍然很难接受新 iPhone 无法在不延迟的情况下对高度变化进行动画处理。

Answer 1

动画高度属性在任何框架中都不是高性能的。高度要求浏览器需要重新布局整个页面，总是会导致卡顿。

更多详情请见CSS-Triggers。

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

编辑

添加指向past talk from Liam DeBeasi 的关于动画和性能的链接。