最近我需要在項(xiàng)目中實(shí)現(xiàn)一個(gè)可見(jiàn)的計(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ì)我來(lái)說(shuō)非常有效的方法。

我需要的計(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)，以備將來(lái)需要樣式化容器的空部分。

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

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

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

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

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

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

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

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

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

我們可以“壓縮”條形，因?yàn)闂l形的樣式?jīng)]有任何東西會(huì)在我們水平縮放時(shí)看起來(lái)被壓縮。如果我們這樣做，我們可以動(dòng)畫寬度。這并不是那么大的問(wèn)題，特別是因?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變量來(lái)設(shè)置動(dòng)畫持續(xù)時(shí)間的嗎？這完成了大部分工作。我還用它來(lái)設(shè)置相同數(shù)量的steps()，以便它“逐格”遞減?！爸鸶瘛笨赡苁且粋€(gè)你喜歡的視覺(jué)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í)器來(lái)說(shuō)是有意義的。時(shí)間，就像它一樣，不會(huì)緩動(dòng)。或者它會(huì)？ 無(wú)論如何，這是你的選擇。如果你想要一個(gè)在某些點(diǎn)看起來(lái)加速或減速的計(jì)時(shí)器，那就去做吧。

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

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

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

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

這是一個(gè)演示：

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

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

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