jquery - css3圖片抖動
問題描述
我這個點擊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 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>
問題解答
回答1：[doge]這根本沒有涉及 css3 好不，你就是單純的改變一個p的寬度，p的寬度原來占據的位置是0，你通過js來改變它的寬度，就會觸發瀏覽器的重繪。
建議是使用 transform:scale(0); 縮放元素，點擊之后在還原 transform:scale(1);，這樣就不會觸發瀏覽器的重繪了。
回答2：受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 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縮小就是縮小一下，跟抖動并沒有什么關系啊。。說起來我理解的抖動不應該是做一個animation,先向左transport再向右？
相關文章：
1. android - weex 項目createInstanceReferenceError: Vue is not defined2. PHPExcel表格導入數據庫怎么導入3. android - 哪位大神知道java后臺的api接口的對象傳到前端后輸入日期報錯，是什么情況？求大神指點4. pdo 寫入到數據庫的內容為中文的時候寫入亂碼5. javascript - 如圖，百度首頁，查看源代碼為什么什么都沒有？6. vue2.0+webpack 如何使用bootstrap？7. PHP類封裝的插入數據，總是插入不成功，返回false；8. mac連接阿里云docker集群，已經卡了2天了，求問？9. vue.js - 為什么我的vue項目上傳到github不能預覽？10. 請問PHPstudy中的數據庫如何創建索引
網公網安備