<template>
  <div>
    <h1>{{ currentValue }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentValue: 1, // 初始值
      targetValue: 10000, // 目標(biāo)值
      duration: 3000, // 動畫持續(xù)時間
      intervalId: null, // 用于保存 setInterval 的 ID
    };
  },
  mounted() {
    this.startAnimation();
  },
  beforeDestroy() {
    clearInterval(this.intervalId); // 清除定時器，防止內(nèi)存泄漏
  },
  methods: {
    startAnimation() {
      const startTime = Date.now();
      const interval = 10; // 每次更新的時間間隔，單位為毫秒
      const step = this.targetValue / (this.duration / interval); // 計算每次增加的量

      this.intervalId = setInterval(() => {
        const elapsedTime = Date.now() - startTime;
        if (elapsedTime >= this.duration) {
          this.currentValue = this.targetValue; // 達(dá)到目標(biāo)值時，停止動畫
          clearInterval(this.intervalId);
        } else {
          this.currentValue = Math.min(
            this.targetValue,
            Math.floor(step * (elapsedTime / interval)) + 1
          ); // 更新數(shù)字
        }
      }, interval);
    },
  },
};
</script>

<style scoped>
h1 {
  transition: transform 0.2s ease-in-out;
}
</style>

<template>
  <div>
    <transition name="fade">
      <h1>{{ currentValue }}</h1>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentValue: 1,
      targetValue: 10000,
      duration: 3000,
    };
  },
  mounted() {
    this.startAnimation();
  },
  methods: {
    startAnimation() {
      const startTime = Date.now();
      const interval = 10;
      const step = this.targetValue / (this.duration / interval);
      const intervalId = setInterval(() => {
        const elapsedTime = Date.now() - startTime;
        if (elapsedTime >= this.duration) {
          this.currentValue = this.targetValue;
          clearInterval(intervalId);
        } else {
          this.currentValue = Math.floor(step * (elapsedTime / interval)) + 1;
        }
      }, interval);
    },
  },
};
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>

<template>
  <div>
    <h1>{{ currentValue }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentValue: 1,
      targetValue: 10000,
      duration: 3000,
      startTime: null,
    };
  },
  mounted() {
    this.startAnimation();
  },
  methods: {
    startAnimation() {
      this.startTime = Date.now();
      this.animate();
    },
    animate() {
      const elapsedTime = Date.now() - this.startTime;
      const step = this.targetValue / this.duration;

      if (elapsedTime < this.duration) {
        this.currentValue = Math.floor(step * elapsedTime);
        requestAnimationFrame(this.animate); // 每幀更新
      } else {
        this.currentValue = this.targetValue;
      }
    },
  },
};
</script>

<style scoped>
h1 {
  font-size: 2em;
  transition: transform 0.2s ease-in-out;
}
</style>