<!DOCTYPE html> <html> <head> <title></title> <script src=https://blog.51cto.com/u_10585798/"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>到此这篇重绘和重排和回流（重绘和回流是什么,如何避免）的文章就 介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章，希望大家都能在 编程的领域有一番成就！
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/bcyy/20945.html