進度條結束后如何重置

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>