Нежелательная задержка при анимации 'transform: scale ()' в Safari с css в Angular - PullRequest
Новая
       19

Нежелательная задержка при анимации 'transform: scale ()' в Safari с css в Angular

3 голосов
/ 21 июня 2019

Я создаю угловое приложение, в котором я пытаюсь анимировать масштабирование и параллельное перемещение графики. Я использую CSS-преобразование для масштабирования (масштабирования) и перемещения (перевода) части и CSS-перехода для анимации. Это хорошо работает в настольных браузерах (Firefox и Chrome в Windows), но у меня есть нежелательная задержка в Safari на IOS (iPad Air). Это всегда около 2 секунд и не меняется. Анимация начинается сразу после этой задержки и, кажется, работает отлично. Я заметил, что задержка исчезла, если я не использую масштабную опцию, но я не могу обойтись без масштабирования всего div, потому что он должен соответствовать размеру экрана.

Я пытался использовать другие возможности анимации, такие как ng-animate (https://github.com/jiayihu/ng-animate), но, вероятно, функция масштабирования этой библиотеки также использует масштабирование, потому что у меня возникла та же проблема с этим.

Некоторый упрощенный код: Сначала я инициализирую компонент с параметром масштабирования: 

scaleUI() {
  var previewArea: HTMLElement = document.querySelector(".previewArea");
  previewArea.style.transform = "scale(0.3, 0.3)";
  previewArea.style.webkitTransform = "scale(0.3, 0.3)";
}

При нажатии я устанавливаю новый параметр масштабирования и переводю значения: 

var previewArea: HTMLElement = document.querySelector(".previewArea");

previewArea.style.transitionProperty = "transform";
previewArea.style.webkitTransitionProperty = "transform";
previewArea.style.transitionDuration = "1s";
previewArea.style.webkitTransitionDuration = "1s";
previewArea.style.webkitTransitionDelay = "0.1s";
previewArea.style.transitionDelay = "0.1s";
previewArea.style.transitionTimingFunction = "ease";
previewArea.style.webkitTransitionTimingFunction = "ease";

previewArea.style.webkitTransform = "scale(0.5, 0.5)translate(-" + value1 + "px, -" + value2 + "px)";

Даже если я уберу шкалу после щелчка, задержка присутствует. Только если я полностью уберу шкалу с этого компонента, задержка исчезнет.

Кто-нибудь может порекомендовать другой способ сделать масштабирование, на которое, возможно, не влияет эта ошибка? Или есть способ это исправить?

Используемый iPad - это iPad Air 3 на iOS 12.3.1. Та же проблема на iPad Air 2 на iOS 12.3. Задержка НЕ ​​присутствует на iPhone 7 на iOS 11.4.

...