vue实现数字翻页效果

Vue 实现数字翻页效果

在 Vue 中实现数字翻页效果可以通过多种方式完成，以下是一种常见的实现方法：

使用 transition 和动态绑定

通过 Vue 的 transition 组件和动态绑定数字，可以实现平滑的数字翻页效果。

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

<script>
export default {
  data() {
    return {
      currentNumber: 0
    }
  },
  methods: {
    increment() {
      this.currentNumber++
    },
    decrement() {
      this.currentNumber--
    }
  }
}
</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 {
  font-size: 2rem;
  margin: 1rem;
}
</style>

使用第三方库

如果需要更复杂的效果，可以考虑使用第三方库如 vue-countup 或 anime.js。

安装 vue-countup：

npm install vue-countup

使用示例：

<template>
  <count-up
    :endVal="endValue"
    :options="options"
  />
</template>

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

export default {
  components: { CountUp },
  data() {
    return {
      endValue: 1000,
      options: {
        duration: 2.5,
        separator: ',',
        decimal: '.',
        prefix: '$',
        suffix: ' USD'
      }
    }
  }
}
</script>

自定义动画效果

通过自定义 CSS 动画和 JavaScript 控制，可以实现更灵活的翻页效果。

<template>
  <div class="flip-counter">
    <div class="flip-card" v-for="(digit, index) in digits" :key="index">
      <div class="flip-card-inner" :class="{ 'flipped': digit.isFlipping }">
        <div class="flip-card-front">{{ digit.prevValue }}</div>
        <div class="flip-card-back">{{ digit.currentValue }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0,
      digits: []
    }
  },
  watch: {
    currentNumber(newVal, oldVal) {
      this.animateDigits(newVal, oldVal)
    }
  },
  methods: {
    animateDigits(newVal, oldVal) {
      const newStr = newVal.toString().padStart(3, '0')
      const oldStr = oldVal.toString().padStart(3, '0')

      this.digits = Array.from(newStr).map((char, i) => ({
        currentValue: char,
        prevValue: oldStr[i],
        isFlipping: char !== oldStr[i]
      }))

      setTimeout(() => {
        this.digits = this.digits.map(digit => ({
          ...digit,
          isFlipping: false
        }))
      }, 600)
    }
  }
}
</script>

<style>
.flip-counter {
  display: flex;
  justify-content: center;
}

.flip-card {
  perspective: 1000px;
  width: 60px;
  height: 100px;
  margin: 0 5px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-inner.flipped {
  transform: rotateX(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  border-radius: 10px;
  background: #f5f5f5;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.flip-card-back {
  transform: rotateX(180deg);
}
</style>

这些方法提供了不同复杂程度的数字翻页效果实现，可以根据项目需求选择合适的方式。