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所在元素的高度動態(tài)計算位置，出現在中間高度，那么就會導致在移除ant-spin-blur時，總高度變小，導致loading動畫的位置發(fā)生改變。