关于前端:自定义计数器小技巧CSS-实现长按点赞累积动画

欢送关注我的公众号：前端侦探

在某条 APP 中，如果长按点赞，会呈现这样花里胡哨的动画，如下

这个动画有两局部组成，其中这个随机表情的实现能够参考 coco 的这篇文章 巧用 transition 实现短视频 APP 点赞动画

比拟相似，这里就不反复了，咱们这里要实现的是这个一直变动的数字动画，如下演示

仔细观察，次要有以下几个交互

1. 鼠标按下有一个向上呈现的动画，抬起会缓缓隐没
2. 数字一直累加
3. 提醒文字在达到某一指定值时主动变动，激励！> 加油!! > 太棒了!!!

一起看看如何实现的吧

一、鼠标按下抬起交互

应用伪元素能够让 HTML 足够简洁和灵便，比方 HTML 如下

<button class="like"> 长按点赞 </button>

用伪元素来实现提醒文案，简略润饰一下

.like{position: relative;}
.like::after{
  position: absolute;
  bottom: 100%;
  width: max-content;
  font-size: 2rem;
  font-style: italic;
  font-weight: bolder;
  background-image: linear-gradient(#FFCF02, #FF7352);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  content:'x10';
}

成果如下

而后，咱们须要将这个提醒在默认状况下暗藏起来，按下的时候才呈现

.like::after{
  /**/
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.like:active::after{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

这样很轻易就实现了一个按下就向上呈现，抬起就还原的动画

然而，这样的动画看着不太难受，那么，如何在抬起时扭转回退动画呢？很简略，把向上呈现的过渡动画设置在 :active 上，并且增加一个延时，保障在元素在隐没后，位移动画才还原

对于这个动画技巧，能够参考我之前的这篇文章 CSS 实现按钮点击动效的套路

.like::after{
  /**/
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: .3s .3s, 0s .6s transform; /* 默认状况下没有 transform*/
}
.like:active::after{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: .3s;
}

成果如下

二、数字一直累加

再来看看 CSS 数字变动。

对于这个技巧，之前在这两篇文章中都有提到：还在应用定时器吗？CSS 也能实现电子时钟和动画合成小技巧！CSS 实现动感的倒计时成果

在以前，数字的变动可能须要创立多个标签，而后扭转位移来实现

<div>
    <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>...</span>
</div>

这种形式须要创立多个标签，稍微繁琐，也不易扩大，而且也 没方法在伪元素中应用。

不过当初有更简洁的形式能够实现了，那就是 CSS @property。这是干什么的呢？简略来讲，能够自定义属性，在这个例子中，能够让数字像色彩一样进行过渡和动画，可能不太懂，间接看例子吧

咱们先通过 CSS 变量将数字渲染到页面，这里须要借助计数器

有趣味的能够参考这篇文章：小 tips: 如何借助 content 属性显示 CSS var 变量值

.like::after{
  /**/
  --t:0;
  counter-reset: time var(--t);
  content: counter(time);
}

为了不便测试，这里先将提醒设置为可见，成果如下

如何让这个数字变动呢？能够用到 CSS 动画，将 --t 变动到 999

@keyframes count {
    to {--t: 999}
}
.like::after{
  /**/
  --t:0;
  counter-reset: time var(--t);
  content: counter(time);
  animation: count 100s steps(999) forwards;
}

成果如下

然而并没有什么动画，其实是须要等 100s 当前才会间接变成999。而后最重要的一步来了，加上以下自定义属性

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

对的，仅仅增加这一小段 CSS，动画就进去了

是不是很神奇？能够这么了解，通过 @property 定义后，这个变量 --t 自身能够独自设置动画了，就像色彩变动一样。

而后，咱们要实现只有按下的时候才会呈现动画，能够默认将动画暂停，按下的时候才运行

.like::after{
  /**/
  --t:0;
  counter-reset: time var(--t);
  content: counter(time);
  animation: count 100s steps(999) forwards;
  animation-play-state: paused; /* 默认暂停 */
}

.like:active::after{
  /**/
  animation-play-state: running; /* 按下运行 */
}

当初看看成果吧

三、提醒的阶段变动

提醒在数字一直累积的过程中有一个阶段性的变动，如下

1. 0~20：激励！
2. 20~50：加油!!
3. 50~：太棒了!!!

那么，如何依据 CSS 变量来主动映射不同的提醒呢？这里能够用到自定义计数器，比方，咱们先自定义一个计数器

@counter-style 激励 {
  system: cyclic;
  symbols: '激励！';
  range: 1 20;
}

这样定义了一个名为“激励”的计数器，简略解释一下，system，示意计算零碎，这里为 cyclic，示意循环应用开发者提供的一套字符，字符由symbos 定义。而后 symbos 示意计算符号，也就是具体展现的字符，这里指定为 激励!就行了。而后有个 range 属性，示意计数器的范畴，这里指定为1 20。示意如下

这部分自定义计数器内容比较复杂，也比拟新，有趣味的能够参考张鑫旭的这篇文章：CSS @counter-style 规定具体介绍

而后将这个自定义的计数器也通过伪元素渲染进去

.like::after{content: counter(time)  counter(time, 激励);
}

上面看下成果

能够看到，当计数在 1~20 范畴内，渲染的是自定义字符“激励!”，当超过这个范畴后，又变成了一般的数字，因而咱们须要做一个“回退”解决，也就是在这个区间外的规定，CSS 计数器也提供了这样的能力，名为fallback，实现就是这样

@counter-style 激励 {
  system: cyclic;
  symbols: '激励！';
  range: 1 20;
  fallback: 加油
}
@counter-style 加油 {
  system: cyclic;
  symbols: '加油！！';
  range: 21 50;
  fallback: 太棒了
}
@counter-style 太棒了 {
  system: cyclic;
  symbols: '太棒了！！！';
  range: 51 infinite;
}

置信应该比拟好了解，当计数器 range 超出时，就会依照 fallback 的计数规定继续执行，能够有限嵌套，下面能够略微简化一下，区间能够更加灵便一点，比方 加油 的区间，进入到这个计数器，终点必定曾经超过了 20，所以能够把终点也改为0，简化后如下

@counter-style 激励 {
  system: cyclic;
  symbols: '激励！';
  range: 0 20;
  fallback: 加油
}
@counter-style 加油 {
  system: cyclic;
  symbols: '加油！！';
  range: 0 50; /* 进入到这个计数器，终点必定曾经超过了 20*/
  fallback: 太棒了
}
@counter-style 太棒了 {
  system: cyclic;
  symbols: '太棒了！！！';
}

示意如下

这样就失去了文章结尾的演示成果

残缺代码能够拜访：CSS add num animation (codenpen.io)或者 CSS add num animation (juejin.cn)或者 CSS add num animation (gitee.io)

四、总结一下

以上就是全部内容了，还不错的动画小技巧，你学会了吗？上面总结一下

1. 鼠标按下和抬起的过渡动画通常是相同的，不过能够通过在按下时设置 transition 来扭转抬起的动画
2. 数字一直累加能够借助 @property 来实现，它能够让 CSS 变量像色彩一样过渡或者动画
3. 计数器能够让 CSS 变量渲染到伪元素上
4. animation-play-state能够实现按下动画开始，抬起动画暂停的成果
5. 自定义计数器能够让指定计数范畴内渲染某一些字符
6. 要实现计数的阶段变动能够用 fallback 进行回退，能够跳转到另一个计数器
7. 提一下兼容性，Chrome 91+，目前还不太适宜内部应用，但能够提前理解

当然，自定义计数器的后劲远远不止于此，前面还会进行更多的开掘与利用。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探