Vue3中如何实现数字翻牌效果?

在Vue 3中，可以通过使用<transition>元素和CSS来实现数字翻牌效果。以下是一个简单的例子：

<template>
  <div id="app">
    <div class="flip-clock">
      <transition mode="out-in" @after-enter="nextNumber">
        <div v-if="show" key="current" class="flip">
          {{ currentNumber }}
        </div>
      </transition>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentNumber: 0,
      show: true,
      intervalId: null
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      this.currentNumber = (this.currentNumber + 1) % 100;
    }, 1000);
  },
  unmounted() {
    clearInterval(this.intervalId);
  },
  methods: {
    nextNumber() {
      this.show = !this.show;
    }
  }
};
</script>
 
<style scoped>
.flip-clock {
  perspective: 1000px;
}
 
.flip-enter-active, .flip-leave-active {
  transition: transform 1s;
  transition-timing-function: cubic-bezier(0.3, 0.1, 0.1, 1);
}
 
.flip-enter-from, .flip-leave-to {
  transform: translateZ(100px) scale(0);
}
 
.flip {
  font-size: 50px;
  display: inline-block;
  line-height: 1em;
  text-align: center;
  position: relative;
  transform-style: preserve-3d;
}
</style>

在这个例子中，我们使用了Vue的<transition>元素来包裹数字显示的部分，并定义了进入和离开的动画效果。通过修改currentNumber的值，可以实现数字的翻牌效果。CSS中的perspective和transform-style属性帮助创建3D翻牌效果。代码中的nextNumber方法负责在数字翻完后切换显示的数字块。