Question

我想使用纯Javascript实现带有动画的简单“技能部分”，我想一次只填充一个小节。我怎么能用纯JavaScript做到这一点？

这是HTML代码

<!DOCTYPE html>
<html>
  <head>
    <title>Progress Bars</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <!-- start a skill -->
      <div class="skill-box">
        <div class="skill-name">Python</div>
        <div class="bar">
          <div class="progress" data-value="90%"></div>
        </div>
      </div>
      <!-- end a skill -->
      <!-- start a skill -->
      <div class="skill-box">
        <div class="skill-name">C</div>
        <div class="bar">
          <div class="progress" data-value="35%"></div>
        </div>
      </div>
      <!-- end a skill -->
      <!-- start a skill -->
      <div class="skill-box">
        <div class="skill-name">Linux</div>
        <div class="bar">
          <div class="progress" data-value="75%"></div>
        </div>
      </div>
      <!-- end a skill -->

      <div class="test" data-value="75%"></div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

这是Javascript代码

document.addEventListener("DOMContentLoaded", function () {
  let progressBars = document.querySelectorAll(".progress");
  progressBars.forEach((bar) => {
    console.log(bar.dataset.value);
    bar.style.width = bar.dataset.value;
  });
});

Answer 1

您需要等待过渡所需的时间。因此，假设您的过渡时间为500毫秒，那么每次进展都需要等到500毫秒乘以您的进度

   document.addEventListener("DOMContentLoaded", function () {
        let progressBars = document.querySelectorAll(".progress");
        const transitionSpan = 500;// Transition is 500ms
        progressBars.forEach((bar, index) => {
            //Wait for previous transion to finish 500 * index
            setTimeout(() => {
                    bar.style.width = bar.dataset.value;
            }, 500 * index)
        });
  });

您的CSS应该看起来像这样

  .progress{
        width:0%; // Set a starting with so transition will take affect
        height:1px;
        background:black;
        transition:width ease-in 500ms;
    }

Answer 2

别担心！ JavaScript是一种单线程语言。这意味着一次只能运行一个功能。如果我做了console.log()，则整个程序将暂停直到该操作完成。

for(i in progressBars){
for(let j = 0; j<101; i++){
 i.style.width=`${i}%`
}
})

应该在理论上起作用

有没有一种方法可以用纯JavaScript为一个进度栏设置动画？

2 个答案: