重绘、重排（回流）| 强制重绘的使用场景 | 如何强制回流

 

 

<!DOCTYPE html\>
<html>
<head>
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.has-transition {
    -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;
}
li {
    background: #ccc;
    border: 1px #000 solid;
    display: block;
    padding: 2px;
    margin-left: 0;
    margin-top: 4px;
    margin-bottom: 4px;
}
</style>
</head>
<body>
<p>第一种情况)</p>
<ul class="example-1">
    <li class="has-transition">1</li>
    <li class="has-transition">2</li>
    <li class="has-transition">3</li>
    <li class="has-transition">4</li>
    <li class="has-transition">5</li>
</ul>
<p>第二种情况)</p>
<ul class="example-2">
    <li class="has-transition">1</li>
    <li class="has-transition">2</li>
    <li class="has-transition">3</li>
    <li class="has-transition">4</li>
    <li class="has-transition">5</li>
</ul>

<script type="text/javascript">
  $('.example-1 li').click(function () {
    $(this).removeClass('has-transition');
    $(this).css('margin-left', 100);
    $(this).addClass('has-transition');
    $(this).css('margin-left', 50);
  });
  $('.example-2 li').click(function () {
    $(this).removeClass('has-transition');
    $(this).css('margin-left', 100);
    $(this)[0].offsetHeight; // 强制执行重排，确保设置的100px能够生效
    $(this).addClass('has-transition');
    $(this).css('margin-left', 50);
  });
</script>
</body>
</html>

 

posted @ 2019-12-02 10:29  刘金宇  阅读(752)  评论(0)  编辑  收藏  举报