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