BUG現(xiàn)象
當(dāng)列表加載時(shí),整個(gè)列表結(jié)構(gòu)會(huì)發(fā)生抖動(dòng)問(wèn)題。
BUG原因
當(dāng)列表加載時(shí)，會(huì)給列表的內(nèi)容加上一個(gè)遮罩層。
表現(xiàn)在代碼上就是會(huì)給列表內(nèi)容所在div加上一個(gè).ant-spin-blur，在加載完畢后移除。
以下是這兩個(gè)class簡(jiǎn)化了兼容性之后的樣式
.ant-spin-blur{
overflow: hidden;
opacity: 0.7;
filter: blur(0.5px);
-webkit-transform: translateZ(0);
}
/* 列表內(nèi)容所在div本來(lái)就存在的樣式 */
.ant-spin-container{
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
position: relative;
}
如上transition這個(gè)過(guò)渡效果是對(duì)所有可過(guò)渡樣式有效，而模糊效果filter: blur(0.5px)會(huì)導(dǎo)致一個(gè)位移。
表現(xiàn)在頁(yè)面上就是遮罩出現(xiàn)和消失時(shí)，列表都會(huì)抖動(dòng)
