Блог

Я создаю простое приложение для ионного конденсатора с помощью Angular.
Приложение включает в себя несколько довольно простых анимаций, и я ошеломлен, узнав, что эти анимации невероятно отстают:

В приложении у меня есть список контактов. При выборе контакта высота div над списком увеличивается, а список ниже перемещается вниз. Пожалуйста, обратитесь к скриншотам ниже.

Эта анимация реализована с использованием собственной библиотеки анимации Ionic:

 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 не может анимировать изменение высоты без задержки.