Vue transition组件简单实现数字滚动
实现效果
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 {
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代码：
.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数字滚动的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
