数字滚动效果实现

下周就要开始大屏的开发工作了，内容包含大块的数字展示区域，且数字在更新需要滚动效果。借此花点时间封装一下单个数字滚动组件

动画.gif

搭建基本结构

<div class="box">
  <span class="num">0123456789</span>
</div>

.box {
  height: 82px;
  width: 54px;
  line-height: 82px;
  text-align: center;
  background-color: #149373;
  border-radius: 10px;
  margin-right: 5px;
}
.num {
  font-size: 62px;
}
复制代码

此时，出来的效果为

若是想要滚动效果的话，就需要将数字变成竖向排布，这样才能加上下移动效果。这时需要加两个css属性

writing-mode: vertical-lr;
text-orientation: upright;
复制代码

此时已经有点接近目标了，而后需要做的就是要改变字符串的位置，让相应的数字出现在框中。改变位置我们可以让span变成绝对定位，然后通过transform来操作

.box {
  height: 82px;
  width: 54px;
  line-height: 82px;
  text-align: center;
  background-color: #149373;
  border-radius: 10px;
  margin-right: 5px;

  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
}
.num {
  position: absolute;
  left: 50%;
  top: 10px;
  font-size: 62px;
  transform: translate(-50%, 0);
}
复制代码

此时设置translate(-50%, 0)时，正好0在框中，若设置translate(-50%, -50%)时，应该是5在框中

后续只需要我们改变transform中translate设置，就可以实现框中出现不同的数字，我们要封装成通用的组件，就是接收外部传入的数字，然后设置translate来达到通用的效果，此时我们可以将transform放置在我们的style中。再增加一个动画，transition: all 0.5s;

<template>
  <div class="box">
    <span class="num" :style="`transform: translate(-50%, -${number * 10}%)`">0123456789</span>
  </div>
</template>

<script setup lang="ts">
defineProps({
  number: {
    type: Number,
    default: 5,
    required: true,
  },
});
</script>
复制代码

动画.gif

这时候差不多达成了文字滚动的效果了，此时只需要在box类下增加一个overflow: hidden，将超出部分隐藏那么数字滚动效果就达成了。效果就如同

动画2.gif

这就是简单的一个封装，以下是完整代码。借此做简单的做一个记录，也希望大家可以来探讨分享一下其它的实现方案。

<template>
  <div class="box">
    <span class="num" :style="`transform: translate(-50%, -${number * 10}%)`">0123456789</span>
  </div>
</template>

<script setup lang="ts">
defineProps({
  number: {
    type: Number,
    default: 5,
    required: true,
  },
});
</script>

<style lang="less" scoped>
.box {
  height: 82px;
  width: 54px;
  line-height: 82px;
  text-align: center;
  background-color: #149373;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 5px;

  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
}
.num {
  position: absolute;
  left: 50%;
  top: 10px;
  font-size: 62px;
  color: #ffffff;
  transition: all 1.5s;
}
</style>

复制代码

数字滚动效果实现

猜你喜欢