#angular #ionic-framework #animation #css-animations #capacitor
Вопрос:
Я создаю простое приложение для ионного конденсатора с помощью 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 не может анимировать изменение высоты без задержки.
Комментарии:
1. Я также сталкиваюсь с проблемой производительности на устройствах Android, но IOS работает нормально для меня. github.com/ionic-team/capacitor/discussions/3899