jquery中的CSS动画属性

CSS animation property in jquery

本文关键字：属性 动画 CSS 中的 jquery      更新时间：2023-09-26

所以我想在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变量划分为以千为单位输出的值，并使用s到"animation": "load " + rnd/1000 + "s linear"。

如果这不起作用，请提供一个MCV示例，我们将进一步帮助您。

编辑:检查这个，我已经更新了你的代码片段。问题是.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>

相关文章：