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

Question

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

发布于
2017-04-24

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

css html

阅读 2.4k

1 个回答

得票最新

Xeira

4.1k3717

发布于
2017-04-24

✓ 已被采纳

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