CSS-анимация Stuttery для увеличения изображений в Safari

Я пытаюсь создать анимацию, которая берет изображение, находящееся в любом месте страницы, и перемещает его в середину, изменяя его размер до полной ширины окна браузера. Мое решение работает, но в нем есть некоторые заикания/скачки, которые я не могу объяснить. Есть ли кто-нибудь, кто уже пытался создать подобную анимацию? РЕДАКТИРОВАТЬ: я заметил, что проблема с заиканием появляется только в macOS Safari. В других браузерах эта анимация выглядит идеально гладкой.

Вот мой js-код:

function getWindowWidth() {
   return document.documentElement.clientWidth
}

function getWindowHeight() {
   return document.documentElement.clientHeight;
}

//at the moment this is hacky and only supports one image to be enlarged
let en_img_left = null;
let en_img_top = null;

function enlargeImage(img) {
   let boundingClientRect = img.getBoundingClientRect();
   img.style.position = "fixed";
   en_img_top = boundingClientRect.y + "px";
   img.style.top = en_img_top;
   en_img_left = boundingClientRect.x + "px";
   img.style.left = en_img_left;
   img.style.width = boundingClientRect.width + "px";
   img.style.zIndex = "1000";
   setTimeout(function() {
      img.style.transition = "1s ease-in-out";
      setTimeout(function() {
         let scaleFactor = getWindowWidth() / boundingClientRect.width;
         img.style.transform = "scale(" + scaleFactor + ")";
         img.style.left = getWindowWidth() / 2 - (boundingClientRect.width / 2) + "px";
         img.style.top = getWindowHeight() / 2 - boundingClientRect.height / 2 + "px";
      }, 1);
   }, 1);
   return img;
}

function delargeImage(img) { //sorry for the function name
   img.style.transition = "1s ease-in-out";
   setTimeout(function() {
      img.style.transform = "scale(1)";
      img.style.left = en_img_left;
      img.style.top = en_img_top;
   }, 1);
   return img;
}

пример кода HTML+CSS, но это может быть любое изображение с идентификатором на сайте:

HTML:

<div class="container">
<img id="example" style="width: 100%" src="https://images.pexels.com/photos/1361815/pexels-photo-1361815.jpeg?cs=srgb&dl=blur-bokeh-close-up-1361815.jpg&fm=jpg">
</div>

CSS:

.container {
   width: 200px;
}

Я также сделал jsfiddle, довольно хорошо отображающий проблему заикания: /11/


javascript html css css-animations web-animations
person robske_110    schedule 27.08.2018    source источник
comment
Вы действительно не видите заиканий в вашем примере? Когда это должно произойти, можете ли вы указать, пробовали ли вы использовать изображение из локальных ресурсов, а не из внешней ссылки?   -  person whiraj    schedule 27.08.2018
comment
@whiterabbitj О, сейчас я протестировал его в других браузерах, и заикание, похоже, только в Apple Safari на macOS. И использование локального образа или внешних ресурсов не имеет значения. Обновленный вопрос.   -  person robske_110    schedule 27.08.2018
comment
хм странно попробуй почистить кеш, может перезагрузить комп, может поможет. Не вижу, как Safari будет интерпретировать java-скрипт по-другому. Может быть, изменить анимацию на более простую и посмотреть, появляется ли заикание, было бы хорошей идеей?   -  person whiraj    schedule 27.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вы не используете анимацию или переходы CSS!

Сама анимация выполняется через JavaScript в вашем примере. Вместо того, чтобы вычислять каждый шаг анимации в JS и устанавливать новое свойство CSS на каждой итерации, вы должны настроить анимацию CSS с желаемыми начальным и конечным состояниями или определить свойства, которые должны быть преобразованы. Таким образом, анимация при переходе должна выглядеть плавно.

Ваш пример с использованием перехода CSS (без кода JS):

.container {
	width: 200px;
  transition: width ease-in 1s;
}

.container:hover {
  width: 80vw;
}

.container img {
  width: 100%;
}
<div class="container">
   <img id="example" src="https://images.pexels.com/photos/1361815/pexels-photo-1361815.jpeg?cs=srgb&dl=blur-bokeh-close-up-1361815.jpg&fm=jpg">
</div>

person feeela    schedule 27.08.2018
comment
Спасибо за ответ! Но я использую анимацию CSS, я просто устанавливаю конечные и стоп-состояния в js. (setInterval не используется, только 2 setTimeout для обхода анимации, применяемой к начальному абсолютному отделению pos.) Я мог бы попытаться создать пример только с css, но это не изменит результат. Также я обнаружил, что заикание происходит только в Safari, в других браузерах моя анимация работает плавно, уточню это еще больше. - person robske_110; 27.08.2018