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