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

ko.applyBindings导致进度条冻结

1 个答案: