ko.applyBindings導致進度條凍結

Question

我們正在努力實現從 https://codepen.io/ImBobby/pen/keaHp?page=1&

一個進度條，我們有一個非常大的數據集。我們試圖實現滾動條，以便客戶知道頁面沒有損壞，只是加載時間比預期的要長，但是當代碼到達ko.applyBindings調用時，進度條的動畫會凍結。我們如何保持動畫不被凍結？

HTML

<h1>ForEach Test</h1> 
<div class="container"> 
    <div class="loading"> 
    <div class="loading-bar"></div> 
    </div> 
</div> 
<div data-bind="foreach: people"> 
    <input data-bind='value:name'> 
</div> 

的Javascript

var test = new AppViewModel(); 
ko.applyBindings(test); 

function AppViewModel() { 
var self = this; 

self.people = ko.observableArray([ 
    { name: 'Bert' }, 
    { name: 'Charles' }, 
    { name: 'Denise' } 
]); 

CSS

.container{ 
    width: 300px; 
    height: auto; 
    margin: 50px auto 30px; 
} 

.loading{ 
    width: 500px; 
    height: 30px; 
    border: solid 2px grey; 
    overflow: hidden; 
    position: relative; 
} 

.loading-bar{ 
    position: absolute; 
    width: 1200px; 
    height: 30px; 
    background: grey; 
    background-image: -webkit-linear-gradient(45deg, white 0%, white 30%, grey 30%, grey 70%, white 70%); 
    background-image: -webkit-moz-gradient(45deg, white 0%, white 30%, grey 30%, grey 70%, white 70%); 
    background-image: -webkit-o-gradient(45deg, white 0%, white 30%, grey 30%, grey 70%, white 70%); 
    background-image: linear-gradient(45deg, white 0%, white 30%, grey 30%, grey 70%, white 70%); 
    background-size: 100px 30px; 

    animation: slide 4s linear infinite; 
} 

@keyframes slide{ 
    from{right: 0;} 
    to{right: -300px;} 
} 

@keyframes move{ 
    from{width: 0%;} 
    to{width: 100%;} 
} 

如果重複輸入場10次和重複的人名100倍，你開始得到的我們嘗試加載的數據量。您可以在網頁加載時看到進度欄凍結其動畫。當ko.applyBindings被調用時，我們如何保持進度條移動？

Answer 1

看看這個問題的答案的其他問題：Indicate that processor-heavy JS function is running (GIF spinners don't animate)

如果你使用它似乎更好地工作

@keyframes slide{ 
    from{transform: translatex(-300px);} 
    to{transform: translatex(0);} 
}