当前位置：首页 > VUE

vue实现数字翻页效果

2026-02-20 20:08:34VUE

实现数字翻页效果的方法

在Vue中实现数字翻页效果，可以通过动态绑定和过渡动画结合实现。以下是两种常见实现方式：

使用动态绑定与CSS过渡

通过v-bind绑定数字，配合CSS过渡实现平滑翻页效果。

<template>
  <div class="counter">
    <div class="number" :key="currentNumber" :style="{ transform: `translateY(${offset}px)` }">
      {{ currentNumber }}
    </div>
  </div>
  <button @click="increment">+1</button>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0,
      offset: 0
    }
  },
  methods: {
    increment() {
      this.offset = -30; // 向上移动初始位置
      setTimeout(() => {
        this.currentNumber++;
        this.offset = 0; // 复位
      }, 300);
    }
  }
}
</script>

<style>
.counter {
  height: 30px;
  overflow: hidden;
  position: relative;
}
.number {
  position: absolute;
  transition: transform 0.3s ease;
}
</style>

使用`<transition>`组件实现

利用Vue内置的过渡组件实现更复杂的动画效果。

<template>
  <div class="counter">
    <transition name="slide" mode="out-in">
      <div :key="currentNumber" class="number">
        {{ currentNumber }}
      </div>
    </transition>
  </div>
  <button @click="currentNumber++">+1</button>
</template>

<script>
export default {
  data() {
    return { currentNumber: 0 }
  }
}
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s;
}
.slide-enter-from {
  transform: translateY(30px);
  opacity: 0;
}
.slide-leave-to {
  transform: translateY(-30px);
  opacity: 0;
}
</style>

实现多位数翻页效果

对于多位数（如计时器），可拆分为单个数字分别动画：

<template>
  <div class="digital-counter">
    <div v-for="(digit, index) in digits" :key="index" class="digit-container">
      <transition name="slide">
        <div :key="digit" class="digit">{{ digit }}</div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  props: ['value'],
  computed: {
    digits() {
      return String(this.value).padStart(2, '0').split('')
    }
  }
}
</script>