【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;
}