jquery - css3圖片抖動(dòng)
問(wèn)題描述
我這個(gè)點(diǎn)擊document彈出圖片他會(huì)抖動(dòng)，不知道是怎么回事？要是把外層的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 src='http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg' src='http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg' 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>
問(wèn)題解答
回答1：[doge]這根本沒(méi)有涉及 css3 好不，你就是單純的改變一個(gè)p的寬度，p的寬度原來(lái)占據(jù)的位置是0，你通過(guò)js來(lái)改變它的寬度，就會(huì)觸發(fā)瀏覽器的重繪。
建議是使用 transform:scale(0); 縮放元素，點(diǎn)擊之后在還原 transform:scale(1);，這樣就不會(huì)觸發(fā)瀏覽器的重繪了。
回答2：受1樓啟發(fā)
<!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 src='http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg' src='http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg' 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>回答3：
你把width縮小就是縮小一下，跟抖動(dòng)并沒(méi)有什么關(guān)系啊。。說(shuō)起來(lái)我理解的抖動(dòng)不應(yīng)該是做一個(gè)animation,先向左transport再向右？
相關(guān)文章：
1. java - Web開(kāi)發(fā) - POI導(dǎo)出帶有下拉框的Excel和解決下拉中數(shù)組過(guò)多而產(chǎn)生的異常2. Python做掃描，發(fā)包速度實(shí)在是太慢了，有優(yōu)化的方案嗎？3. javascript - 關(guān)于定時(shí)器 與 防止連續(xù)點(diǎn)擊 問(wèn)題4. objective-c - ios百度地圖定位問(wèn)題5. java - 微信退款，公賬號(hào)向個(gè)人轉(zhuǎn)賬SSL驗(yàn)證失敗6. python - 使用xlsxwriter寫(xiě)入Excel, 只能寫(xiě)入65536 無(wú)法繼續(xù)寫(xiě)入.7. python - flask如何創(chuàng)建中文列名的數(shù)據(jù)表8. java - 安卓接入微信登錄,onCreate不會(huì)執(zhí)行9. 微信開(kāi)放平臺(tái) - Android調(diào)用微信分享不顯示10. python - mysql 如何設(shè)置通用型字段? 比如像mongodb那樣
網(wǎng)公網(wǎng)安備