进度条结束后如何重置

Question

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

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

Thnx，莱昂

 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的 class 来重置进度条。

 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，设置为与您的动画持续时间中使用的相同的持续时间，在您的点击事件处理程序中重置转换并删除完整的 class。

 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规则：

当 CSS 转换完成时，将触发 transitionend 事件。

在此事件侦听器中，将transitionDuration设置为默认值。 在下一步中，从.progress中删除 class 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>