Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
201 views
in Technique[技术] by (71.8m points)

问一个回流(reflow)相关的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div {
        width: 100px; height: 100px; background: #eee;
    }
.slide-left {
        -webkit-transition: margin-left 1s ease-out;
            -moz-transition: margin-left 1s ease-out;
            -o-transition: margin-left 1s ease-out;
            transition: margin-left 1s ease-out;
    }
    </style>
</head>
<body>
    <div class="slide-left"></div>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>    
    <script type="text/javascript">
        var $slide = $('.slide-left');
        $slide.css({
            "margin-left": "100px"
        });
        //console.log($slide.css('padding'));
        $slide.addClass('slide-left');
        $slide.css({
            "margin-left": "10px"
        });
    </script>
</body>
</html>

其中如果我将console 注释掉,动画效果就不会生效,如果不注释掉,就生效.
我想问一下这个是什么原因?

来源: https://zhuanlan.zhihu.com/p/...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

在codepen里什么区别也没有,都是从left-margin:0变化到left-margin:20px;
原因在于第一个动画刚开始,margin-left的值就变了,于是第二个动画就把第一个覆盖掉了,有没有那行console不应该有任何区别


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...