具有自定义属性的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中文网其他相关文章！