图片宽高总是获取错误？注意transition给你带来意想不到结果

最近在开发中，遇到一个奇怪的问题。给一张图片设置宽高，然后因为需求，要在另一个函数获取该img的宽高，发现总获取上一次的宽高值。为了更好的说明，写了个小demo。
html：

css:

.css-image{
        width:200px;
        height:200px;
        -moz-transition: all  0.5 ease; 
        -webkit-transition: all  0.5s ease; 
        -o-transition: all  0.5s ease;
         transition: all  0.5s ease;
}

js:

可以看到图片的初始宽高都是200px，每次点击按钮，就将图片的宽高增加100px,然后立马获取图片的宽高在控制台打印出来，结果如下：

Paste_Image.png

从js代码看，是看不到哪一句代码会导致这个结果，而且查bug的时候，打断点的时候结果是正确的。回过头看css代码，发现为了让图片的动画特效更缓和，加了transition过渡效果，而导致宽高获取错误的正是它。回去细读了transition定义：

Paste_Image.png

因为设置 transition: all 0.5s ease;那么浏览器就会检测该节点的所有改变，500ms之后才完成这个改变。那我们改变图片的宽高，浏览器底层要500ms后才去改变盒模型。
css3过渡、动画等效果，细想来，他们也是要底层动态地去改变的，而不是‘静态’的，以后在查bug，可以不只从js代码层面展开，也可以去检查下是不是跟css代码相关。
最后，唠叨下，本人前端新开发一枚，有什么不正确，可以改进的，欢迎各路大神纠正~