具体问题,但我有一个进度条从100%
到0%
超过10秒,我想,点击一个按钮,将其跳到任何百分比并继续那里。到目前为止,这是一个小提琴:
https://jsfiddle.net/41o6xvyt/
这个有点除了我必须使用超时和一些即时css切换技巧才能使它工作的事实(即使这样它可能无法在较慢的计算机上工作,它会失去很多毫秒)。我想知道是否有更好的方法不需要超时或这种黑客才能工作。
答案 0 :(得分:2)
您需要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
<强> 注意 强>
“即时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%
是必要的原因。
答案 1 :(得分:0)
您可以尝试使用关键帧 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}
}
答案 2 :(得分:0)
我编辑了您的代码并找到了解决方案
$("#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;
}