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. mac里的docker如何命令行开启呢？2. docker pull 错误？3. nginx+uwsgi部署django，8000端口正常，80端口4044. docker-compose 为何找不到配置文件？5. docker images显示的镜像过多，狗眼被亮瞎了，怎么办？6. android-studio - android studio导入.so文件问题？7. javascript - js 对象深拷贝和赋值8. 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败！9. mac连接阿里云docker集群，已经卡了2天了，求问？10. html5 - 移动端UC浏览器兼容问题
网公网安备