数字滚动组件

数字滚动组件

1.逐渐递增效果

<template>
  <div class="number-roll">{{ showCounter }}</div>
</template>

<script>
import gsap from 'gsap'
export default {
  name: 'NumberRoll',
  props: {
    number: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      showNumber: 0
    }
  },
  computed: {
    showCounter() {
      return this.showNumber.toFixed(0)
    }
  },
  mounted() {
    // gsap.to(需要做动画的元素，配置项对象)
    gsap.to(this, {
      duration: 1,
      showNumber: this.number
    })
  },
  watch: {
    number(newVal) {
      gsap.to(this, {
        duration: 1,
        showNumber: newVal
      })
    }
  }
}
</script>

<style lang="less" scoped></style>

2.数字上翻效果

<template>
  <div>
    <div class="numberscroll">
      <li class="item-con" v-for="(_, index) in numberArr" :key="index">
        <p
          class="item"
          :style="{
            transform: `translate(-50%, -${numberArr[index] * 10}%)`,
          }"
        >
          0123456789
        </p>
      </li>
    </div>
  </div>
</template>

<script>
export default {
  name: "numberscroll",
  props: {
    number: {
      type: [String, Number],
      default: () => {
        return 0;
      },
    },
  },
  data() {
    return {
      numberArr: [],
    };
  },
  mounted() {
    let arr = this.number.split("");
    let len = arr.length;
    this.numberArr = new Array(len).fill(0);
    setTimeout(() => {
      this.numberArr = arr ;
    }, 0);
  },
};
</script>

<style scoped>
.numberscroll {
  overflow: hidden;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  line-height: 50px;
  gap: 10px;
}
.item-con {
  position: relative;
  list-style: none;
  width: 50px;
}
.item {
  position: absolute;
  writing-mode: vertical-lr;
  text-orientation: upright;
  user-select: none;
  font-size: 40px;
  margin: 0;
  letter-spacing: 10px;
  transition: all 2s ease-in-out;
  transform: translate(-50%, 0);
}
</style>