循环不覆盖 div 的样式

Question

function lineComplete() {
  let line = document.getElementById("line");
  for (let percentage = 0; percentage <= 100; percentage++) {
    setTimeout(function() {
      line.style.width = `${percentage}%`;
    }, percentage * 25);
    if (percentage === 100) {
      undo();
    }
  }

  function undo() {
    for (let percent = 100; percent >= 0; percent--) {
      setTimeout(function() {
        line.style.width = `${percent}%`;
      }, percent * 25);
    }
  }
}

#outLine {
  width: 60%;
  height: 20px;
  margin: 10px 0px;
  background-image: linear-gradient(to right, #f12711, #f12711);
  border-radius: 20px;
}

#line {
  background-image: linear-gradient(to right, #f12711, #f5af19);
  height: 100%;
  width: 100%;
  border-radius: 20px;
}

<body onload="lineComplete()">
  <div id="outLine">
    <div id="line"></div>
  </div>
</body>

在上面的代码片段中，我试图展示我能够实现的类似加载器的效果。问题是，当 line 的宽度为 100% 时，我试图触发函数 undo。这也很好用。 undo 中有一个循环，它减小了 line 的宽度并逐渐将其宽度变为 0%。该循环也工作正常，因为我在用 alert() 替换其内容后尝试运行它并且工作正常。但是在目前的情况下，循环没有调整 line 的大小。我认为它无法覆盖样式。

Answer 1

您可以像这样简化您的代码。不需要 forloop 和 setTimeout。

function lineComplete() {
  let line = document.getElementById("line");
  line.classList.add("active");

  line.addEventListener("transitionend", () => {
    line.classList.remove("active");
  });
}

#outLine {
  width: 60%;
  height: 20px;
  margin: 10px 0px;
  background-image: linear-gradient(to right, #f12711, #f12711);
  border-radius: 20px;
  overflow: hidden;
}

#line {
  background-image: linear-gradient(to right, #f12711, #f5af19);
  height: 100%;
  width: 0%;
  border-radius: 20px;
  transition: 2s linear;
}

#line.active {
  width: 100%;
}

<body onload="lineComplete()">
    <div id="outLine">
      <div id="line"></div>
    </div>
  </body>

也可以只用动画来完成：

#outLine {
  width: 60%;
  height: 20px;
  margin: 10px 0px;
  background-image: linear-gradient(to right, #f12711, #f12711);
  border-radius: 20px;
  overflow: hidden;
}

#line {
  background-image: linear-gradient(to right, #f12711, #f5af19);
  height: 100%;
  width: 0%;
  border-radius: 20px;
  transition: 4s linear;
}

#line.active {
  animation: linecomplete 2s linear forwards;
  /*                                you can use "infinite" instead of "forwards" if you want */
}

@keyframes linecomplete {
  50% {
    width: 100%;
  }
}

<div id="outLine">
  <div id="line" class="active"></div>
</div>

Answer 2

function lineComplete() {
  let line = document.getElementById("line");
  for (let percentage = 0; percentage <= 100; percentage++) {
    setTimeout(function() {
      line.style.width = `${percentage}%`;
      if (line.style.width === "100%") {
          undo();
      }
    }, percentage * 25);
  }

  function undo() {
    for (let percent = 100; percent >= 0; percent--) {
      setTimeout(function() {
        line.style.width = `${100 - percent}%`;
      }, percent * 25);
    }
  }
}

#outLine {
  width: 60%;
  height: 20px;
  margin: 10px 0px;
  background-image: linear-gradient(to right, #f12711, #f12711);
  border-radius: 20px;
}

#line {
  background-image: linear-gradient(to right, #f12711, #f5af19);
  height: 100%;
  width: 100%;
  border-radius: 20px;
}

<body onload="lineComplete()">
  <div id="outLine">
    <div id="line"></div>
  </div>
</body>

问题是，当您减少时，较晚的迭代会比较早的迭代早运行。让我们对百分比取反 (100 - percentage) 它会起作用。

循环不覆盖 div 的样式

Loop not overriding style of a div

html

javascript

css

dom

background-image