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

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

設(shè)置這個(gè)計(jì)時(shí)器相當(dāng)容易……

讓我們創(chuàng)建一個(gè)父/子元素結(jié)構(gòu)，以備將來需要樣式化容器的空部分。

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

現(xiàn)在，我們只樣式化內(nèi)部的條形。

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

這給我們提供了一個(gè)不錯(cuò)的紅色條形，可以用作時(shí)間指示器。

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

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

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

現(xiàn)在，讓我們開始動(dòng)畫。好消息是，這很簡單。這是一個(gè)單行的關(guān)鍵幀：

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

我們可以“壓縮”條形，因?yàn)闂l形的樣式?jīng)]有任何東西會(huì)在我們水平縮放時(shí)看起來被壓縮。如果我們這樣做，我們可以動(dòng)畫寬度。這並不是那麼大的問題，特別是因?yàn)樗粫?huì)重新調(diào)整其他任何東西的佈局。

現(xiàn)在我們把它應(yīng)用到條形上：

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

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

但是，如果你想要一個(gè)平滑的動(dòng)畫，我們可以這樣做，例如：

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

然後不使用steps ：

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

請(qǐng)注意，我們還使用線性動(dòng)畫，這似乎對(duì)計(jì)時(shí)器來說是有意義的。時(shí)間，就像它一樣，不會(huì)緩動(dòng)。或者它會(huì)？無論如何，這是你的選擇。如果你想要一個(gè)在某些點(diǎn)看起來加速或減速的計(jì)時(shí)器，那就去做吧。

我們可以使用相同的基於data-attribute的API來實(shí)現(xiàn)顏色變化：

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

最後一個(gè)變體是使每一“秒”的寬度固定。這樣，一個(gè)10秒的計(jì)時(shí)器看起來就會(huì)比一個(gè)5秒的計(jì)時(shí)器長：

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

這是一個(gè)演示：

注意其中重啟CSS動(dòng)畫的小技巧。

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

以上是具有自定義屬性的CSS中的計(jì)時(shí)器條的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！