具有自定義屬性的CSS中的計時器條

最近我需要在項目中實現一個可見的計時器，項目中已有類似的計時器UI設計作為參考。用戶不需要看到數字遞減，而是更希望看到一個“條形”從滿到空逐漸減少。我之所以提到這一點，是因為實現“計時器”UI的方法有很多種。本文並非探討所有這些方法（CodePen上的搜索結果會更有幫助），而是探索一種對我來說非常有效的方法。

我需要的計時器類型是項目中所謂的“回合時間”條。執行某個操作可能會觸發回合時間，並且大多數後續操作都會被阻塞，直到回合時間結束。因此，一個清晰的紅色條形計時器是合適的UI選擇。它能給人一種節奏和流程感，你可以“感受”到計時器的結束時間，並安排你的下一個操作。

設置這個計時器相當容易……

讓我們創建一個父/子元素結構，以備將來需要樣式化容器的空部分。

<div>
  <div></div>
</div>

現在，我們只樣式化內部的條形。

 .round-time-bar div {
  height: 5px;
  background: linear-gradient(to bottom, red, #900);
}

這給我們提供了一個不錯的紅色條形，可以用作時間指示器。

接下來，我們需要讓它倒計時，但在這裡我們需要考慮功能性。這樣的計時器需要知道它計時的時間長度！我們可以直接在HTML中提供這個信息。這並不意味著我們避免使用JavaScript——我們正在擁抱它。我們是在說，“嘿，JavaScript，請給我們一個持續時間變量，剩下的事情我們來處理。”

<div style="--duration: 5;">
  <div></div>
</div>

事實上，這種方法非常適合現代的DOM處理JavaScript。只要--variable正確，它就可以隨時重新渲染DOM元素，我們可以確保設計能夠很好地處理這種情況。我們將做一個這樣的變體。

現在，讓我們開始動畫。好消息是，這很簡單。這是一個單行的關鍵幀：

 @keyframes roundtime {
  to {
    /* 比動畫`width`更高效*/
    transform: scaleX(0);
  }
}

我們可以“壓縮”條形，因為條形的樣式沒有任何東西會在我們水平縮放時看起來被壓縮。如果我們這樣做，我們可以動畫寬度。這並不是那麼大的問題，特別是因為它不會重新調整其他任何東西的佈局。

現在我們把它應用到條形上：

 .round-time-bar div {
  /* ... */
  animation: roundtime calc(var(--duration) * 1s) steps(var(--duration)) forwards;
  transform-origin: left center;
}

看到我們是如何利用--duration變量來設置動畫持續時間的嗎？這完成了大部分工作。我還用它來設置相同數量的steps() ，以便它“逐格”遞減。 “逐格”可能是一個你喜歡的視覺UI效果（我喜歡），但它也適應了JavaScript可能隨時重新渲染這個條形的想法，而逐格使得你不太可能注意到。我使用了一個整數作為持續時間值，以便它可以像這樣兼任兩種用途。

但是，如果你想要一個平滑的動畫，我們可以這樣做，例如：

<div ...="" data-style="smooth"></div>

然後不使用steps ：

 .round-time-bar[data-style="smooth"] div {
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
}

請注意，我們還使用線性動畫，這似乎對計時器來說是有意義的。時間，就像它一樣，不會緩動。或者它會？無論如何，這是你的選擇。如果你想要一個在某些點看起來加速或減速的計時器，那就去做吧。

我們可以使用相同的基於data-attribute的API來實現顏色變化：

 .round-time-bar[data-color="blue"] div {
  background: linear-gradient(to bottom, #64b5f6, #1565c0);
}

最後一個變體是使每一“秒”的寬度固定。這樣，一個10秒的計時器看起來就會比一個5秒的計時器長：

 .round-time-bar[data-style="fixed"] div {
  width: calc(var(--duration) * 5%);
}

這是一個演示：

注意其中重啟CSS動畫的小技巧。

哦，對了，我知道有一個<meter></meter>元素，它可能更具語義化，但它自帶的UI不能像我這裡想要的那樣進行動畫——至少不用與之對抗。但我不知道它是否更易訪問？它是否以有用的方式宣布其當前值？如果我們使用JavaScript實時更新<meter></meter>，它會是一個更易訪問的計時器嗎？如果有人知道，我可以在這裡鏈接一個解決方案。

以上是具有自定義屬性的CSS中的計時器條的詳細內容。更多資訊請關注PHP中文網其他相關文章！