进度条结束后如何重置

Question

我找到了这个用于进度条的脚本。单击按钮后，它从 100% 到 0% 平稳运行。 但是如何在进度条达到 0 后重置进度条？我打算在幻灯片中使用这个脚本，它应该在达到 0 后再次 100%。

希望您能在正确的方向上帮助我。

谢谢， 里昂

document.querySelector("button").addEventListener("click", () => {
  document.querySelector(".progress .bar").style.transitionDuration = "10s";
  document.querySelector(".progress").className += " complete";
});

.progress {
  width: 50%;
  height: 2em;
  border: 1px solid black;
}

.bar {
  width: 100%;
  background-color: deepskyblue;
  color: white;
  text-align: center;
  line-height: 2em;
  
  transition-property: width;
  transition-timing-function: linear;
}

.progress.complete .bar {
  width: 0%;
}

button {
  margin-top: 1em;
}

<div class="progress">
  <div class="bar">Loading...</div>
</div>

<button>
  Start
</button>

Answer 1

您可以通过删除complete 类来重置进度条。

document.querySelector("button.start").addEventListener("click", () => {
  document.querySelector(".progress .bar").style.transitionDuration = "10s";
  document.querySelector(".progress").className += " complete";
});

document.querySelector("button.reset").addEventListener("click", () => {
  let className = document.querySelector(".progress").className;
  if (className.indexOf(' complete') > -1) {
    className = className.substr(0, className.indexOf(' complete'));
    document.querySelector(".progress .bar").style.transitionDuration = "0s";
    document.querySelector(".progress").className = className;
  }
});

.progress {
  width: 50%;
  height: 2em;
  border: 1px solid black;
}

.bar {
  width: 100%;
  background-color: deepskyblue;
  color: white;
  text-align: center;
  line-height: 2em;
  
  transition-property: width;
  transition-timing-function: linear;
}

.progress.complete .bar {
  width: 0%;
}

button {
  margin-top: 1em;
}

<div class="progress">
  <div class="bar">Loading...</div>
</div>

<button class="start">
  Start
</button>

<button class="reset">
  Reset
</button>

Answer 2

如果您希望它在没有任何用户交互的情况下是动态的，您可以使用 setTimeout，设置为与您的动画持续时间中使用的持续时间相同，在您的点击事件处理程序中重置过渡并删除完整的类。

const start = document.querySelector("#start")
const progressBar = document.querySelector(".progress .bar")
const progress = document.querySelector(".progress")

function resetProgressBar(){
  progressBar.style.transitionDuration = "10s"
  progress.classList.add("complete")
  setTimeout(() => {
    progress.classList.remove("complete")// <-- remove the class with width:0
    progressBar.style.transitionDuration = "0.1s" //<-- Add a very small transitionDuration or none if you prefer
  }, 10000)// <-- Set this timeout duration to the same as your transitionDuration
}

start.addEventListener("click", resetProgressBar);

.progress {
  width: 50%;
  height: 2em;
  border: 1px solid black;
}

.bar {
  width: 100%;
  background-color: deepskyblue;
  color: white;
  text-align: center;
  line-height: 2em;
  transition-property: width;
  transition-timing-function: linear;
}

.progress.complete .bar {
  width: 0%;
}

button {
  margin-top: 1em;
}

<div class="progress">
  <div class="bar">Loading...</div>
</div>

<button id="start">
  Start
</button>

Answer 3

对于选择器.progress .bar，使用事件transitionend 的侦听器，因为您在css 中使用transition 规则：

transitionend 事件在 CSS 转换完成时触发。

在此事件侦听器中，将 transitionDuration 设置为默认值。在下一步中，从.progress 中删除类complete，这将返回进度条之前的宽度。

document.querySelector("button").addEventListener("click", () => {
    document.querySelector(".progress .bar").style.transitionDuration = "10s";
    document.querySelector(".progress").className += " complete";
});

document.querySelector(".progress .bar").addEventListener("transitionend", () => {
    document.querySelector(".progress.complete .bar").style.transitionDuration = "";
    document.querySelector(".progress").classList.remove("complete");
});

.progress {
    width: 50%;
    height: 2em;
    border: 1px solid black;
}

.bar {
    width: 100%;
    background-color: deepskyblue;
    color: white;
    text-align: center;
    line-height: 2em;

    transition-property: width;
    transition-timing-function: linear;
}

.progress.complete .bar {
    width: 0%;
}

button {
    margin-top: 1em;
}

<div class="progress">
    <div class="bar">Loading...</div>
</div>

<button>
    Start
</button>

Answer 4

感谢您的所有建议。我已经在我的幻灯片脚本中实现了最后一个建议。

它正在运行，幻灯片更换后正在刷新。但是在骑行的某个地方它会停止，我认为何时启动进度条很困惑。

任何人有想法让这个更可靠吗？

  jQuery('.owl-carousel').owlCarousel({
    
    items: 1,
    margin: 0,
    nav: false,
    dots: false,
    slideBy: 1,
    rewind: false,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplaySpeed: 10000,
    loop: true,
    animateOut: 'fadeOut',
    responsive: false,
    mouseDrag: false,
    touchDrag: false,
    lazyLoadEager: 2

  });

  jQuery('.owl-carousel').on('changed.owl.carousel', function(event) {
    document.querySelector(".progress .bar").style.transitionDuration = "5s";
    document.querySelector(".progress").className += " complete";
  })

  document.querySelector(".progress .bar").addEventListener("transitionend", () => {
    document.querySelector(".progress.complete .bar").style.transitionDuration = "5";
    document.querySelector(".progress").classList.remove("complete");

  });

.progress {
    width: 50%;
    height: 2em;
    border: 1px solid black;
}

.bar {
    width: 100%;
    background-color: deepskyblue;
    color: white;
    text-align: center;
    line-height: 2em;

    transition-property: width;
    transition-timing-function: linear;
}

.progress.complete .bar {
    width: 0%;
}

button {
    margin-top: 1em;
}

<div class="progress">
    <div class="bar">Loading...</div>
</div>

<button>
    Start
</button>