BFC引起的loading动画跳动BUG

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动画的位置发生改变。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。