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);} 
}