filter导致列表加载时会发生抖动的BUG

BUG现象

当列表加载时,整个列表结构会发生抖动问题。

BUG原因

当列表加载时,会给列表的内容加上一个遮罩层。
表现在代码上就是会给列表内容所在div加上一个.ant-spin-blur,在加载完毕后移除。
以下是这两个class简化了兼容性之后的样式

.ant-spin-blur{
    overflow: hidden;
    opacity: 0.7;
    filter: blur(0.5px);
    -webkit-transform: translateZ(0);
}
/*  列表内容所在div本来就存在的样式 */
.ant-spin-container{
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    position: relative;
}

如上transition这个过渡效果是对所有可过渡样式有效,而模糊效果filter: blur(0.5px)会导致一个位移。
表现在页面上就是遮罩出现和消失时,列表都会抖动

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