我正在开展一个元素，该元素需要仅使用 html、css 和 javascript 的自定义进度条。我希望能够在进度条上设置初始条件并让它从正确的位置开始。
示例:我有一个时间戳来指示某件事何时开始，我知道它应该何时完成。我希望进度条从按比例正确的位置开始，然后在适当的时间内将宽度过渡到 100% 完成。
我在设置代码时遇到问题，因此这成为可能。我还无法让 css 过渡以编程设置的宽度开始。
这个例子展示了我目前的方法......
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Avenir Next", sans-serif;
font-size: 1em;
text-align: center;
}
html, body, div {
width: 100%;
height: 100%;
background-color: white;
}
#spacer {
height: 40%;
}
#container {
height: 20%;
background-color: gray;
}
#progressBar {
background-color: green;
float: left;
}
</style>
</head>
<body onload="startProgressBar()">
<div id="spacer"></div>
<div id="container">
<div id="progressBar"></div>
</div>
<div id="spacer"></div>
</body>
<script type="text/javascript">
function startProgressBar() {
bar = document.getElementById("progressBar");
// assume that the bar should start at 50%
bar.style.transitionDuration = "0s";
bar.style.width = "50%";
// assume that bar should complete final 50% in 10s
bar.style.transition = "width 10s linear";
bar.style.width = "100%";
}
</script>
</html>
我是 JavaScript 的新手。似乎当我设置 bar.style 时，这些行不是连续执行的。我可能只是误解了 javascript 的工作原理。
最佳答案
这是因为您设置过渡属性的方式。您需要在超时或 requestAnimationFrame 中应用动画，如下所示:
function startProgressBar() {
bar = document.getElementById("progressBar");
// assume that the bar should start at 50%
bar.style.width = "50%";
requestAnimationFrame(function(){
// assume that bar should complete final 50% in 10s
bar.style.transition = "width 10s linear";
bar.style.width = "100%";
});
}
此外，您不需要第一个设置的 transitionDuration，因为您没有过渡到 50%，您希望从那里开始。
关于javascript - 如何使用 javascript 将属性从设置属性转换为新属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30583314/