【CSS】利用Vue实现数字翻滚动画效果

利用Vue实现数字翻滚动画效果

在很多数据可视化的需求中，动态呈现数据变化是一个常见且具有较强视觉冲击力的手段，尤其是数字的实时变化。今天我们将探讨如何使用 Vue.js 和 CSS3 来实现数字的翻滚动画效果，即模拟真实物体在Z轴上翻动的效果。
在这里插入图片描述

使用场景

数字翻滚动画效果通常用于：

展示实时数据，如股票价格、票房收入、在线用户数等。
增强数据展示的交互体验和视觉吸引力。

实现思路

实现的核心思路是通过Vue.js动态控制数字的更改，并利用CSS3的transition和transform属性来实现3D翻滚的视觉效果。

HTML结构

我们将每个数字或字符作为单独的元素来处理，并为它们设置相同的动画效果。对于分隔数字的逗号，我们将其作为特殊的文本元素进行处理。

<div style="display: inline-block;"><div v-for="(item,index) in strArr" :key="index":class="item===','?'txt':'num'":style="{backgroundColor: item===','?'':background, color:item===','?color:'#fff'}"><transition name="flip-number" mode="out-in"><span :key="item" class="number">{{ item }}</span></transition></div>
</div>

Vue逻辑

我们通过Vue组件来管理数字的数据、样式及更新逻辑。数字的动态更新通过组件的created和methods部分实现，同时使用了setInterval来模拟实时数据变化。

export default {props: {data: { type: String | Number, default: ''},background: { type: String, default: '#0f447a'},color: { type: String, default: '#239AFF'},time: { type: Number, default: 2000 }},data() {return {myData: '',strArr: [],interval: null}},created() {this.myData = this.data;this.updateStrArr(this.myData);this.interval = setInterval(() => {this.updateData();}, this.time);},beforeDestroy() {clearInterval(this.interval);},methods: {updateData() {this.myData++;this.updateStrArr(this.myData);},updateStrArr(data) {function padArrayWithZeros(array, minLength = 7) {while (array.length < minLength) {array.unshift(0);}return array;}const str = Number(data).toLocaleString();const arr = str.split('');this.strArr = padArrayWithZeros(arr);}}
}

CSS动画

利用transition和transform属性实现数字的翻滚效果。我们通过旋转和改变透明度来营造翻滚进出的感觉。

.flip-number-enter-active, .flip-number-leave-active {transition: transform 0.1s, opacity 0.1s;
}
.flip-number-enter, .flip-number-leave-to {transform: rotateX(90deg);opacity: 0;
}