javascript - 如何优化 DIV 调整大小时的 CSS3 转换？

Question

我在一个 div 中有一个大图像，我对其应用了调整大小过渡。也许这只是我电脑的速度，但是，我发现操作时有轻微的延迟，而且调整大小本身也不流畅。我在下面附上了一个带有简化版本代码的 fiddle 。谢谢。

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。简而言之，这会在过渡期间将元素变成图像，避免任何样式重新计算，从而大大提高性能。”read more

.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>