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

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 中应用动画，如下所示：

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%，您想要从那里开始。

工作 Plunkr：http://plnkr.co/edit/3CeNFFO4JWFhB679GyAV

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

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

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

http://plnkr.co/edit/igS0ySjiygIQVGp1OIKz

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

How to use javascript to transition a property from a set attribute to a new attribute

javascript

css

progress-bar

transition

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

How to use javascript to transition a property from a set attribute to a new attribute

javascript

css

progress-bar

transition

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