Как оптимизировать CSS3 переходы при изменении размера DIV?

Question

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

function myFunction() {
  var element = document.getElementById("myID");
  element.classList.toggle("div_clicked");
}

.div {
  height: 200px;
  width: 200px;
  transition: height 0.65s ease-in-out;
}

img {
  height: 100%;
}

.div_clicked {
  height: 50px;
  width: 50px;
  transition: height 0.65s ease-in-out;
}

<div id="myID" class="div">
  <img onClick="myFunction();" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
</div>

http://jsfiddle.net/obd0yfun/

Answer 1

Более эффективно использовать transform в вашем случае.

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

.div {
  height: 200px;
  width: 200px;
  transform-origin: top left; // default value is "center"
  -webkit-transform: scale(1);
  -moz-transform:    scale(1);
  -ms-transform:     scale(1);
  -o-transform:      scale(1);
  transform:         scale(1);
  transition: transform 0.65s ease-in-out;
}

img {
  height: 100%;
}

.div_clicked {
  transform-origin: top left; // default value is "center"
  -webkit-transform: scale(.25);
  -moz-transform:    scale(.25);
  -ms-transform:     scale(.25);
  -o-transform:      scale(.25);
  transform:         scale(.25);
  transition: transform 0.65s ease-in-out;
}

<div id="myID" class="div">
  <img onClick="myFunction();" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

<script>
  function myFunction() {
    var element = document.getElementById("myID");
    element.classList.toggle("div_clicked");
  }
</script>