BFC引起的loading动画跳动BUG

发表于:2018-3-13 11:28

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:韩子卢    来源:简书

  BUG现象
  当列表加载时,loading动画在加载过程中出现跳动问题。
  BUG原因
  以下为列表结构:
<div class="ant-spin-nested-loading">
<div class="ant-spin-container">
<div style="height:90px">列表内容</div>
<div style="float: right;height:30px">分页工具条</div>
</div>
</div>
  当列表加载时,会给列表的内容加上一个遮罩层,同时加上loading动画。
<div class="ant-spin-nested-loading">
<div class="loading">我是loading动画</div>
<div class="ant-spin-container ant-spin-blur">
<div style="height:90px">列表内容</div>
<div style="float: right;height:30px">分页工具条</div>
</div>
</div>
  遮罩层表现在代码上就是会给.ant-spin-container内容加上一个.ant-spin-blur,在加载完毕后移除。
  以下是 .ant-spin-blur简化了兼容性之后的样式
.ant-spin-blur{
overflow: hidden;
opacity: 0.7;
filter: blur(0.5px);
-webkit-transform: translateZ(0);
}
  在没加ant-spin-blur之前,ant-spin-nested-loading的高度是90px,因为float元素的高度计算并没有列入其中。
  在加上ant-spin-blur之后,ant-spin-nested-loading的高度为120px,因为overflow:hidden导致ant-spin-container所在的div形成了一个BFC,而在BFC中,浮动元素的高度会纳入到总高度的计算中。
  而loading动画所在的div是根据.ant-spin-nested-loading所在元素的高度动态计算位置,出现在中间高度,那么就会导致在移除ant-spin-blur时,总高度变小,导致loading动画的位置发生改变。
上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号