程序员Web前端的故事

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

2018-01-11  本文已影响0人  韩子卢

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)会导致一个位移。
表现在页面上就是遮罩出现和消失时,列表都会抖动

上一篇 下一篇

猜你喜欢

热点阅读