Vue中如何简易实现数字滚动效果？

本文共计1537个文字，预计阅读时间需要7分钟。

目录实现效果Scrip 布局动画逻辑控制总结实现效果使用 Scrip 创建一个带有滚动数字效果的按钮，点击按钮时数字增加。

Scrip 布局 {{ count }}

Scrip 逻辑javascriptexport default { data() { return { count: 0 }; }, methods: { addCount() { this.count++; } }};

动画.roll-enter-active, .roll-leave-active { transition: transform 0.5s;}.roll-enter, .roll-leave-to /* .roll-leave-active in <2.1.8 */ { transform: translateY(100%);}

总结通过使用 Vue.js 的指令和过渡效果，我们实现了一个点击按钮数字滚动的效果。

目录

• 实现效果
• Scrip
• 布局
• 动画
• 逻辑控制
• 总结

实现效果

Scrip

<template> <button @click="addCount">点我滚动数字</button> <div class="roll-container"> <transition name="roll"> <div class="roll-number" :key="count">{{ count }}</div> </transition> </div> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const count = ref(0); let click_time = Date.now(); function addCount() { if (Date.now() - click_time < 300) return; click_time = Date.now(); count.value += 1; } return { count, addCount, }; }, }); </script> <style> .roll-container { position: relative; text-align: center; font-size: 120px; line-height: 1em; color: #fff; height: 1em; min-width: 1em; max-width: 3em; background: #000000; overflow: hidden; } .roll-number { /* position: absolute; */ /* top: 0; */ width: 100%; } .roll-enter-active, .roll-leave-active { transition: all .3s; position: absolute; top: 0; } .roll-leave-to { top: -1em; } .roll-enter-active { top: 1em; } .roll-enter-to { top: 0; } </style>

使用vue的transition组件，来实现一个数字滚动效果，其实不仅可以是数字滚动，还可以是文字、段落滚动，代码片段使用了定位做的，还可以使用transform，只是一种思路，不限制方案。

布局

没有别人写的东西炫酷，我都不知道怎么写内容了，布局没啥好讲的，我这里会有一个容器包裹内部滚动的数字，主要是用于隐藏内部滚动的数字超出的部分，代码如下：

<div class="roll-container"> <transition name="roll"> <div class="roll-number" :key="count">{{ count }}</div> </transition> </div>

样式如下：

.roll-container { position: relative; text-align: center; font-size: 120px; line-height: 1em; color: #fff; height: 1em; min-width: 1em; max-width: 3em; background: #000000; overflow: hidden; } .roll-number { width: 100%; }

这里的细节就是transition组件是用于元素显隐状态切换使用的，一般用于v-if、v-show，还有transition-group也是一样的，不过transition-group是用于多个元素上的，可以作用在列表上，对于列表的数据新增、删除可以触发过渡效果。

而我这里使用key，key发生改变可以强制元素的更新，可以完整的触发组件的生命周期，就达到了元素销毁和创建的整个过程，也可以触发过渡，key的作用老生常谈了，可以网上去查查资料，用得好可以有很多巧妙的作用。

动画

动画是使用vue的transition组件的css class过渡方式，官网上的文档过渡的生命周期描述的很清楚，我就不搬运了，vue transiton组件

过渡css代码：

/* 动画激活时给予初始状态，这个基础状态用于定义后续过渡动作的起点 这里统一定义了组件创建和组件销毁的两个起点，主要是赋予 transition 使其有一个过渡 */ .roll-enter-active, .roll-leave-active { transition: all .3s; position: absolute; top: 0; } /* 组件销毁，过渡的终点 最开始的起点是原位，离开的时候滚到上面去 */ .roll-leave-to { top: -1em; } /* 组件创建，过渡的起点 创建的时候是重下往上进入，所以元素最开始是在下面 */ .roll-enter-active { top: 1em; } /* 过渡的时候回到起点，达到重下往上滚动 */ .roll-enter-to { top: 0; }

代码就这么一丢丢，只要理解了过渡的生命周期，就可以控制各种效果，我这里这个应该是入门级代码，这里的细节就是需要定义一个过渡的起点，因为使用的是定位，如果不设置起点是没有过渡效果的，如果是用变换（transform）可以不用设置起点，为什么这个就和css相关了，不在这次的谈论范围之内。

逻辑控制

逻辑控制主要是要动画执行完成之后才能再次修改变量，否则就会有重叠，闪动等，造成动画不连贯，我这里动画执行时间是300毫秒，所以也就是300毫秒只能修改一次状态。

const count = ref(0); // 缓存第一次状态修改的时间 let click_time = Date.now(); function addCount() { // 300ms 只能执行一次 if (Date.now() - click_time < 300) return; // 重置状态修改的时间 click_time = Date.now(); count.value += 1; }

这个就是一个很简单的逻辑控制，这里是通过点击来修改的，这里也可以通过定时器去处理。

总结

以前要做一个数字滚动需要弄一个插件，插件代码也多，通过js进行控制处理，一般都是把0-9的数字放一排，然后滚动，滚动完成把头部的数字放到尾部，而使用transition组件只要这么一丢丢代码就可以完成相同的功能，如果在加上vue3新出的css变量绑定，还可以做到过渡动画执行时间的动态控制。

以上就是Vue transition组件简单实现数字滚动的详细内容，更多关于Vue transition数字滚动的资料请关注易盾网络其它相关文章！