jquery - css3图片抖动-PHP中文网问答

我这个点击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>

<!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>

全部回复(3)

阿神2017-04-17 11:34:49 3楼

[doge]
这根本没有涉及 css3 好不，你就是单纯的改变一个p的宽度，p的宽度原来占据的位置是0，你通过js来改变它的宽度，就会触发浏览器的重绘。

建议是使用 transform:scale(0); 缩放元素，点击之后在还原 transform:scale(1);，这样就不会触发浏览器的重绘了。

赞 +0

添加回复