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),我们将立即处理。