动态滚动数字的秘诀：使用 Vue 3 的 transition-group 实现

2023-12-13 03:52:48

前言

伴随着双十一的临近，公司决定制作一个展示的电子大屏，其中总金额的数字需要滚动的切换效果，类似于银行或车站的大屏幕。回想自己十年如一日的摸鱼生涯，我不禁回想起 Vue 中的 transition-group 特性，它或许可以完美解决我们的问题。

思考与实现

2.1 思考

transition-group 顾名思义，就是可以对一组元素进行过渡动画控制的组件。它在 Vue 2 中就已经存在，但在 Vue 3 中得到了进一步的加强。我们可以利用它来实现数字滚动的效果。

首先，我们需要定义一个包含数字的数组，例如：

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

接下来，我们需要创建一个 Vue 组件来显示这些数字并实现滚动的效果。在这个组件中，我们将使用 transition-group 来包裹数字，并通过 CSS 动画来控制它们的过渡效果。

2.2 实现

<template>
  <transition-group name="number-roll" tag="ul">
    <li v-for="number in numbers" :key="number">{{ number }}</li>
  </transition-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const numbers = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

    return {
      numbers,
    };
  },
};
</script>

<style>
.number-roll-enter-active, .number-roll-leave-active {
  transition: all 1s ease;
}
.number-roll-enter-from {
  transform: translateX(100%);
}
.number-roll-leave-to {
  transform: translateX(-100%);
}
</style>