数字动态滚动

数字滚动主要使用css3的transform translateY 上下滚动实现的

模板

<template>
  <div>
    <div
      v-for="(item, index) in this.num"
      :key="index"
      :class="[item===','?'noreal':'real-time-num']"
    >
       <div
        class="real-time-num-item"
        :style="{ transform:item===','? `translateY(-${0* 98}px)`:`translateY(-${item * 98+98}px)`
         }"
      >
        <div>,</div>
        <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>
    </div>
    <sonConpoment :valLeft='num' />
  </div>
</template>

数据

<script> 
export default {
  data() {
    return {
      num: []
    };
  },
  props:{
    dataString:{
      type:'String',
      require:true
    }
  },
  watch:{
    dataString:{
      handler(news){
        this.num = []
        this.num = news.split("")
      }
    }
  },
  mounted() {},
  methods: {
    btn() {
      this.num = "1,233,324";
      console.log(this.num.split(""));
    }
  }
};
</script>

样式

.real-time-num {
  display: inline-block;
  width: 66px;
  height: 98px;
  background: linear-gradient(
    0deg,
    rgba(36, 97, 147, 1),
    rgba(115, 157, 191, 1)
  );
  font-size: 60px;
  margin-left: 3px;
  line-height: 98px;
  text-align: center;
  overflow: hidden; // 隐藏内容
}
.noreal{
  display: inline-block;
  width: 10px;
  height: 98px;
  background-color:#ffffff; 
  font-size: 60px;
  margin-left: 3px;
  line-height: 98px;
  text-align: center;
  overflow: hidden; // 隐藏内容  
}
.real-time-num > div {
  width: 66px;
  height: 98px;
}
.real-time-num-item {
  transition: all 1s ease-out;
}