所以我想在JS中生成一个随机数来连接到css动画属性内,使其具有随机时间属性。
正如你所想象的,从我的代码片段来看,这是一个预加载器。我希望它有一个随机时间(2 到 8 秒长)
$(window).load(function() {
var rnd = Math.random() * (8000 - 2000) + 2000;
$('.progress').css(function() {
"animation": "load" + rnd + "linear"
});
setTimeout(function() {
$('#page').addClass('loaded');
$('#page').removeClass('unloaded');
$('#loader').hide();
}, val);
});
最佳答案
您没有在动画持续时间上附加时间单位。
您可以使用 "animation": "load "+ rnd + "ms Linear"
分配 ms
(看看我如何在变量之间留下空格)或者您可以将 rnd
变量以千为单位输出值,并通过 "animation"使用
.s
: "load "+ rnd/1000 + "s Linear"
如果这不起作用,请提供 MCV example我们将为您提供进一步帮助。
编辑:检查一下,我已经更新了您的代码片段。问题是 .css( property, value)
而不是您发送的函数。
$(window).load(function() {
var rnd = Math.random() * (8000 - 2000) + 2000;
$('.progress').css("animation", "load " + rnd + "ms linear");
setTimeout(function() {
$('#page').addClass('loaded');
$('#page').removeClass('unloaded');
$('#loader').hide();
}, rnd);
});
#page {
position: absolute;
background: rgb(240, 240, 240);
height: 100%;
width: 100%;
}
#loader {
position: absolute;
top: calc(50% - 10px);
left: calc(25%);
width: 50%;
}
.progress {
width: 100%;
height: 20px;
background: #3498db;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.loaded {
opacity: 1;
}
.unloaded {
opacity: 0;
}
@keyframes load {
0% {
width: 0%;
}
25% {
width: 50%;
}
50% {
width: 60%;
}
90% {
width: 95%;
}
100% {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">
<div class="progress"></div>
</div>
<div id="page" class="unloaded">
Loaded result
</div>
关于javascript - jquery中的CSS动画属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39063624/