vue实现数字翻页递增

Vue 实现数字翻页递增

在 Vue 中实现数字翻页递增效果，可以通过动态绑定数据并结合 CSS 动画或 JavaScript 动画库实现。以下是几种常见方法：

使用 Vue 的过渡动画

通过 Vue 的 <transition> 或 <transition-group> 结合 CSS 实现数字递增动画。

<template>
  <div>
    <transition name="slide-up" mode="out-in">
      <span :key="currentNumber" class="number">{{ currentNumber }}</span>
    </transition>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0
    };
  },
  methods: {
    increment() {
      this.currentNumber += 1;
    }
  }
};
</script>

<style>
.slide-up-enter-active, .slide-up-leave-active {
  transition: all 0.5s ease;
}
.slide-up-enter {
  transform: translateY(20px);
  opacity: 0;
}
.slide-up-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
.number {
  display: inline-block;
  font-size: 24px;
}
</style>

使用 GSAP 实现平滑动画

GSAP 是一个强大的动画库，可以实现更复杂的数字递增效果。

<template>
  <div>
    <span ref="numberElement" class="number">{{ currentNumber }}</span>
    <button @click="animateIncrement">增加</button>
  </div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  data() {
    return {
      currentNumber: 0,
      targetNumber: 0
    };
  },
  methods: {
    animateIncrement() {
      this.targetNumber += 1;
      gsap.to(this, {
        duration: 0.5,
        currentNumber: this.targetNumber,
        onUpdate: () => {
          this.$refs.numberElement.textContent = Math.floor(this.currentNumber);
        }
      });
    }
  }
};
</script>

使用自定义指令实现数字滚动

通过自定义指令监听数字变化并触发动画。

<template>
  <div>
    <span v-number="currentNumber"></span>
    <button @click="currentNumber += 1">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0
    };
  },
  directives: {
    number: {
      bind(el, binding) {
        el.textContent = binding.value;
      },
      update(el, binding) {
        const target = binding.value;
        const duration = 500;
        const start = parseFloat(el.textContent);
        const increment = (target - start) / duration;
        let current = start;
        const animate = () => {
          current += increment;
          el.textContent = Math.floor(current);
          if (current < target) {
            requestAnimationFrame(animate);
          } else {
            el.textContent = target;
          }
        };
        animate();
      }
    }
  }
};
</script>

使用第三方库 vue-countup

vue-countup 是一个专门用于数字动画的 Vue 组件，安装后可直接使用。

npm install vue-countup

<template>
  <div>
    <count-up :endVal="currentNumber" :options="options"></count-up>
    <button @click="currentNumber += 1">增加</button>
  </div>
</template>

<script>
import CountUp from 'vue-countup';

export default {
  components: { CountUp },
  data() {
    return {
      currentNumber: 0,
      options: {
        duration: 0.5,
        useEasing: true
      }
    };
  }
};
</script>

以上方法可根据需求选择，CSS 过渡适合简单效果，GSAP 或自定义指令适合复杂动画，vue-countup 则提供开箱即用的解决方案。