Question

我正在开发一个项目，该项目需要使用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的工作方式。

Answer 1

这是因为您设置过渡属性的方式。您需要在超时或requestAnimationFrame中应用动画，如下所示：

import json
json.dumps(
   {"MetaData": {}, 
    "SRData": {"AddressVerified": "Y", 
           "SRNumber": "1-16774241", 
           "SRType": "Electronic Waste"}})

此外，您不需要第一个设置transitionDuration，因为您没有转换到50％，您想从那里开始。

工作Plunkr：https://github.com/sendgrid/sendgrid-ruby

Answer 2

仅仅setTimeout应该这样做：

function startProgressBar(){
  bar=document.getElementById('progressBar');
  bar.style.width='50%';
  setTimeout(function(){
    bar.style.transitionDuration='2s';
    bar.style.width='100%';
  },1);
}
startProgressBar();

* {
    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;
}

<div id="spacer"></div>
<div id="container"><div id="progressBar"></div></div>
<div id="spacer"></div>

更新：哎呀！没意识到@ KevinF 已经发布了一个很好的解决方案。

Answer 3

或者只是简单地在#ssogress中给#progressBar一个宽度值。

#progressBar {
    background-color: green;
    float: left;
    width: 50%;
}

http://plnkr.co/edit/igS0ySjiygIQVGp1OIKz

如何使用javascript将属性从set属性转换为新属性

3 个答案: