最近在开发中，遇到一个奇怪的问题。给一张图片设置宽高，然后因为需求，要在另一个函数获取该img的宽高，发现总获取上一次的宽高值。为了更好的说明，写了个小demo。
html：
<body>
<img class="css-image" src="./9ddb5e9.png">
<input type="button" value="button" onclick="func()">
</body>
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:
<script>
var $img = $("img");
function func(){
var height = $img.height();
var width = $img.width();
height += 100;
width += 100;
$img.height(height);
$img.width(width);
console.log(`最新的高度是：${height}`);
console.log(`jquery height()方法获取的高度: ${ $img.height()}`);
console.log(`jquery css()方法获取的高度: ${$img.css("height")}`);
console.log(`js原生.clientHeight获取的高度: ${ $img[0].clientHeight}`);
console.log(`=============================================`);
}
</script>
可以看到图片的初始宽高都是200px，每次点击按钮，就将图片的宽高增加100px,然后立马获取图片的宽高在控制台打印出来，结果如下：
Paste_Image.png
从js代码看，是看不到哪一句代码会导致这个结果，而且查bug的时候，打断点的时候结果是正确的。回过头看css代码，发现为了让图片的动画特效更缓和，加了transition过渡效果，而导致宽高获取错误的正是它。回去细读了transition定义：
Paste_Image.png
因为设置 transition: all 0.5s ease;那么浏览器就会检测该节点的所有改变，500ms之后才完成这个改变。那我们改变图片的宽高，浏览器底层要500ms后才去改变盒模型。
css3过渡、动画等效果，细想来，他们也是要底层动态地去改变的，而不是‘静态’的，以后在查bug，可以不只从js代码层面展开，也可以去检查下是不是跟css代码相关。
最后，唠叨下，本人前端新开发一枚，有什么不正确，可以改进的，欢迎各路大神纠正~
网友评论