为什么offset()才能使动画生效

很实用的一个小技巧，页面加载时动画生效，因为 getBoundingClientRect 可以强制浏览器计算当前元素的 layout，这样就可以阻止两次操作被合并。相当于jQuery中的$(x).offset()

<div id="x"></div>
  <script>
    x.className='start'
    x.getBoundingClientRect()// $(x).offset()
     x.className+=' end'
  </script>
<style>
.start{
  width:200px;
  height:200px;
  background:red;
  transition:width 2s;
}
.end{
  width:600px;
}
</style>