关于使用transition修改height和transform

2018-05-11 本文已影响0人 cb12hx

1.修改height

修改元素的高度可能会导致子元素的大小也会变化，所以浏览器不得不进行relayout。在relayout之后主线程还需要重新生成元素的位图

2.修改transform

CSS transform属性并不会触发当前元素或附近元素的relayout

3.结果对比

3.1 生成两万个节点，进行动画对比

height

image.png
transform

image.png

3.2 生成100个节点，进行动画对比

height

image.png
transform

image.png

4.结论

在存在大量dom时，尽量用transfrom来修改dom大小，如果dom不多，可随意选择（这里牵涉到，transform在做动画时，dom占据的空间不变，但是修改height时，dom占据的空间会变，根据ui需求进行选择即可）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  <style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }

  div {
    width: 100%;
    height: 200px;
  }
  div:nth-of-type(3){
    transition: all .2s;
  }
  </style>
</head>

<body>
  <div></div>
  <script type="text/javascript">
  var html = ''
  for (var i = 0; i < 100; i++) {
    html += '<div id="div'+i+'" style="background:' + getRandomColor() + '"></div>'
  }
  document.querySelector('div').innerHTML = html

  function getRandomColor() {
    return '#' + (Math.random() * 0xffffff << 0).toString(16);
  }
  var div2=document.querySelector('#div2')
  function setHeight() {
    div2.style.height = Math.random()*200 + 'px'
    setTimeout(setHeight,1000)
  }
  setHeight()

  </script>
</body>

</html>

修改transform的，把setHeight改为setTransform即可

  function setTransform() {
    div2.style.transform = 'scale(' + Math.random() + ')' 
    setTimeout(setTransform,1000)
  }
  setTransform()

5.参考文档

https://juejin.im/entry/5af415396fb9a07acc11bdc4?utm_source=gold_browser_extension