CSS 计数器的妙用:数字递增动效

10/16 12:00
阅读数 8.2K

  持续进步的同学都关注了1024译站

CSS 计数器是由 CSS 维护的变量,这些变量可根据 CSS 规则增加从而跟踪使用次数。我们可以利用这个特性,根据文档位置来调整内容表现,比如显示列表编号。

最近在公司官网就用到了这个特性:

image.png

因为这里的序号只是个装饰,并不强调先后顺序。比起使用真实 DOM 元素显示序号,CSS 计数器更加简洁灵活,万一内容顺序需要调整,序号也不受影响。

有时候我们会看到某些 Dashboard 界面有数字快速滚动的效果,比如招行 App 的账户余额。这种效果怎么实现呢?本文会介绍几种方法。

JavaScript 方案

最简单的莫过于用 setInterval定时器了,定期修改 DOM 内容就行。不过为了实现更平顺的动画效果,更推荐使用 requestAnimationFrame:

function animateValue(obj, start, end, duration{
  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    obj.innerHTML = Math.floor(progress * (end - start) + start);
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
}

const obj = document.getElementById("value");
animateValue(obj, 10005000);
js.gif

CSS @keyframes 结合 margin

这个思路比较有意思,原理是把数字排成一行,通过动画移动元素位置来显示不同位置的数字:

<div class="counter">
  <div class="numbers">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</div>
.counter {
  width100px;
  overflow: hidden;
}
.numbers {
  width: auto;
  display: flex;
  animation: countNumber 4s infinite alternate;
  animation-timing-functionsteps(10);
}
.numbers div {
  text-align: center;
  flex0 0 100px;
}

@keyframes countNumber {
  0% {
    margin-left0px;
  }
  100% {
    margin-left: -1000px;
  }
}
keyframe.gif

CSS 计数器入门版

CSS 计数器使用到以下几个属性:

  • counter-reset - 创建或者重置计数器

  • counter-increment - 递增变量

  • content - 插入生成的内容

  • counter() 或 counters() 函数 - 将计数器的值添加到元素

要使用 CSS 计数器,得先用 counter-reset 创建。结合 CSS 动画 @keyframes,在动画的不同阶段设置不同的递增值,就能实现这个效果:

<div></div>
div::after {
  contentcounter(count);
  animation: counter 3s linear infinite alternate;
  counter-reset: count 0;
}

@keyframes counter {
  0% {
    counter-increment: count 0;
  }
  10% {
    counter-increment: count 1;
  }
  20% {
    counter-increment: count 2;
  }
  30% {
    counter-increment: count 3;
  }
  40% {
    counter-increment: count 4;
  }
  50% {
    counter-increment: count 5;
  }
  60% {
    counter-increment: count 6;
  }
  70% {
    counter-increment: count 7;
  }
  80% {
    counter-increment: count 8;
  }
  90% {
    counter-increment: count 9;
  }
  100% {
    counter-increment: count 10;
  }
}

CSS 计数器高配版

更进一步,如果敢用最新特性,其实有更秀的操作,那就是给 CSS 变量设置动画。这个技巧的核心就是设置 CSS 自定义属性为整数类型,这样就能像其他拥有整数类型值的 CSS 属性一样,可用于 transition中了。

@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

div {
  transition: --num 1s;
  counter-reset: num var(--num);
}
div:hover {
  --num10000;
}
div::after {
  content: counter(num);
}

不过需要注意的是,目前只有 Chrome (或者 Chromium 内核的浏览器比如 Edge 和 Opera)支持 @property语法,因此兼容性是个问题。如果你的页面只针对 Chrome(比如 Electron 应用),那就可以放心使用。否则还是用前面的保守方案吧。

小数也能玩动画

前面说的变量都要求是整数,那能不能让小数也支持这种动画呢?答案是可以的。

可以把小数转成整数。步骤原理是:

  1. 注册一个整型的 CSS 变量(即--number),指定初始值initial-value

  2. calc将值取整:--integer: calc(var(--number))

@property --integer {
  syntax: "<integer>";
  initial-value0;
  inherits: false;
}
--number: 1234.5678;
--integer: calc(var(--number)); /* 1235 */

如果只需要提取整数部分,可以这样: --integer: max(var(--number) - 0.5, 0),连calc()都不需要了。类似方法可以提取小数部分。

/* @property --integer */
--number: 1234.5678;
--integermax(var(--number- 0.5, 0); /* 1234 */

完整代码:

<div></div>
@property --percent {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
@property --temp {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
@property --v1 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --v2 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

div {
  font: 800 40px monospace;
  padding: 2rem;
  transition: --percent 1s;
  --temp: calc(var(--percent) * 100);
  --v1: max(var(--temp) - 0.50);
  --v2: max((var(--temp) - var(--v1)) * 100 - 0.50);
  counter-reset: v1 var(--v1) v2 var(--v2);
}
div::before {
  content: counter(v1) "." counter(v2, decimal-leading-zero) "%";
}
const genNumber = () => {
  document.querySelector("div").style.setProperty("--percent"Math.random());
};

setInterval(genNumber, 2000);
setTimeout(genNumber);
decimal.gif


顺手点“在看”,每天早下班;转发加关注,共奔小康路~

本文分享自微信公众号 - 1024译站(trans1024)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
2
3 收藏
分享
加载中
我在css-tricks投稿的文章居然被翻译回来了!!
超感动的,不过还是补个出处吧兄弟。。。
10/17 11:06
回复
举报
李中凯博主
尴尬了,你有发布中文版么?也不算翻译,内容演绎了下,引用了代码。https://css-tricks.com/animating-number-counters/
10/17 13:40
回复
举报
就是抄@@@袭 @@@,别解释了
10/17 13:52
回复
举报
李中凯博主
好的
10/18 13:25
回复
举报
更多评论
打赏
4 评论
3 收藏
2
分享
返回顶部
顶部