[vue]数字滚动特效

<template>
    <div
      class="scroll_box"
      :style="{ '--i': item == '.' ? 0 : item  , '--delay': delay }"
      @animationend="isShow = false"
    >
      <div class="list_box" :class="{ animate: isShow }">
        <div>pw_item == '.' ? '.' : '0'</div>
        <div v-for="num in 9">pw_ num </div>
        <div>0</div>
      </div>
    </div>
  </template>

export default {
  name: "ScrollList",
  props: {
    item: {
      type: String,
      default: 0
    },
    delay: {
      type: Number,
      default: 1
    },
  },
  data() {
    return {
      timer: null,
      isShow: true
    };
  },
  watch: {
    item(newVal,oldVal) {
      console.log('1111',newVal);
      this.isShow = true;
    }
  },
  mounted() {},
  beforeDestroy() {}
};

<style scoped lang="less">
.scroll_box {
  width: 70px;
  height: 50px;
  font-size: 50px;
  overflow: hidden;
  line-height: 50px;
  text-align: center;
}
.list_box {
  color: #fff;
  transform: translateY(calc(var(--i) * -9.05%));
}
.animate {
  animation: move 0.3s linear infinite,
    bounce-into 0.8s calc(var(--delay) * 0.2s) forwards;
}
@keyframes move {
  from {
    transform: translateY(-90%);
    filter: url(#blur);
  }
  to {
    transform: translateY(1%);
    filter: url(#blur);
  }
}
@keyframes bounce-into {
  from {
    transform: translateY(calc(var(--i) * -9.05% - 7%));
    filter: none;
  }
  25% {
    transform: translateY(calc(var(--i) * -9.05% + 3%));
  }
  50% {
    transform: translateY(calc(var(--i) * -9.05% - 1%));
  }
  70% {
    transform: translateY(calc(var(--i) * -9.05% + 0.6%));
  }
  85% {
    transform: translateY(calc(var(--i) * -9.05% - 0.3%));
  }
  to {
    transform: translateY(calc(var(--i) * -9.05%));
  }
}
</style>

<div class="scroll">
  <ScrollList
  v-for="(item, index) in numArr"
  :key="index"
  :item="item"
  :delay="index"
  class="nums"
/>
</div>

<script>
import ScrollList from "@/components/scroll_list.vue";
export default {
  name: 'HomeView',
  components: {
    ScrollList
  },
  data() {
    return {
      amount: 892345.11
    };
  },
  computed: {
    numArr() {
      const str = String(this.amount);
      let options = [];
      for (let i = 0; i < str.length; i++) {
        options.push((str[i]));
      }
      return options;
    }
  },
  mounted() {
    // setInterval(() => this.amount++, 10000);
  }
}
</script>

<style>
  .scroll {
    display: flex;
  }
</style>