我这个点击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>
阿神2017-04-17 11:34:49
[doge]
這根本沒有涉及css3 好不，你就是單純的改變一個p的寬度，p的寬度原來佔據的位置是0，你透過js來改變它的寬度，就會觸發瀏覽器的重繪。
建議是使用 transform:scale(0); 縮放元素，點選之後在還原 transform:scale(1);，這樣就不會觸發瀏覽器的重繪了。
迷茫2017-04-17 11:34:49
受1樓啟發
<!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;
transform: scale(0,1);
width:174px;
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('transform', 'scale(1, 1)');
});
});
</script>
</body>
</html>
ringa_lee2017-04-17 11:34:49
你把width縮小就是縮小一下，跟抖動並沒有什麼關係啊。 。說起來我理解的抖動不應該是做一個animation,先向左transport再向右？