Question

具体问题，但我有一个进度条从100%到0%超过10秒，我想，点击一个按钮，将其跳到任何百分比并继续那里。到目前为止，这是一个小提琴：

这个有点除了我必须使用超时和一些即时css切换技巧才能使它工作的事实（即使这样它可能无法在较慢的计算机上工作，它会失去很多毫秒）。我想知道是否有更好的方法不需要超时或这种黑客才能工作。

Answer 1

您需要setTimeout()的原因是因为更改是由浏览器缓存的，并且仅在整个脚本执行后应用。 setTimeout允许一个脚本执行，然后在超时后执行另一个脚本。这允许应用CSS更改。在您的示例中，如果我们只在这里调用b()，那么会发生什么：

$("#first").css({ 'transition-duration' : '0s' });  // Cache change1
$("#first").css("width","50%");                     // Cache change2
$("#first").css({ 'transition-duration' : '5s' });  // Overwrite change1
$("#first").css("width", "0%");                     // Overwrite change2
// Apply style changes

transition-duration和width的第一次更改几乎从未存在过，而且从未应用过，因为它全部都是在脚本结束时完成的。

如果您读取元素的offsetHeight属性，它将刷新缓存并应用更改，这将强制应用对CSS的更改。

您还需要做的是更改要在CSS中设置的进度条width而不是属性（因为flush只影响CSS而不是直接影响{{1}中的项目} 的）。

style

Fiddle Example

<强> 注意

“即时css切换技巧”并不是真正的诡计。我们只想将$("#report_jump").click(function(){ $("#first").css({ 'transition-duration' : '0s' }); $("#first").css("width","50%"); $("#first")[0].offsetHeight; // flush CSS, the above changes will now be applied b(); });更改为width，并在0秒内执行此操作。这就是50%是必要的原因。

Answer 2

您可以尝试使用关键帧 http://jsfiddle.net/j44gbwna/3/

@keyframes loader {
    0% {left: 0px;}
    99% { left: 100%;} 
}

@-webkit-keyframes loader {
    0% {width: 0%;left:0;right:0}
    50% { width: 100%;left:0;right:0} 
    99% { width: 0%;left:100%;right:0} 
}

Answer 3

我编辑了您的代码并找到了解决方案

$("#report_start").click(function(){
     $("#first").removeClass('notransition');
     $("#first").css("width","0%");
});

$("#report_jump").click(function(){
    $("#first").css("width","50%");
    $("#first").addClass('notransition'); // to remove transition
    var dummyDelay=$("#first").width();   
   $("#report_start").trigger('click');
 });

在css中添加类

.notransition { 
  -webkit-transition: none !important; 
  -moz-transition: none !important; 
  -o-transition: none !important; 
  -ms-transition: none !important; 
  transition: none !important; 
}

看到现场直播 https://jsfiddle.net/mailmerohit5/jbL3n4kj/

如何即时更新平滑更新进度条？

3 个答案: