我这个点击document弹出图片他会抖动，不知道是怎么回事？
要是把外层的sdf去了他又是正常的，要怎么改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.sdf{
width:500px;
height:500px;
overflow:hidden;
margin:200px auto;
position:relative;
}
.outter{
width:174px;
height:155px;
position:absolute;
top:100px;
left:200px;
transition:all 1s ease;
}
.dd{
background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
overflow:hidden;
background-size:174px 155px;
background-position:center center;
transition:all 1s ease;
width:0px;
height:155px;
margin:0 auto;
}
</style>
</head>
<body>
<p class="sdf">
<img class="lazy" src="http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg" src="http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg" width="100%" alt="" style="display: inline;">
<p class="outter">
<p class='dd'></p>
</p>
</p>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function() {
$(document).on('click', function() {
$(".dd").css({
'width':'174px'
})
});
});
</script>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
[doge]
This does not involve css3 at all. Well, you just change the width of a p. The width of p originally occupied the position of 0. If you change its width through js, it will trigger the browser. redraw.
It is recommended to use transform:scale(0); to scale the element, and then restore transform:scale(1); after clicking, so that it will not trigger the browser to redraw.
Inspired by 1st Floor
When you reduce the width, you just reduce it. It has nothing to do with jitter. . Speaking of which, the dithering I understand should not be an animation, transporting to the left first and then to the right?