重绘、重排（回流）| 强制重绘的使用场景 | 如何强制回流
<!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).offsetHeight; // 强制执行重排，确保设置的100px能够生效
$(this).addClass('has-transition');
$(this).css('margin-left', 50);
});
</script>
</body>
</html>
文档来源：51CTO技术博客https://blog.51cto.com/u_10585798/3269291
页:
[1]