Vue transition组件简单实现数字滚动

 更新时间:2022年09月22日 11:12:25   作者:田八  
这篇文章主要为大家介绍了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 {
  /* 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>
      

使用vuetransition组件,来实现一个数字滚动效果,其实不仅可以是数字滚动,还可以是文字、段落滚动,代码片段使用了定位做的,还可以使用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-ifv-show,还有transition-group也是一样的,不过transition-group是用于多个元素上的,可以作用在列表上,对于列表的数据新增、删除可以触发过渡效果。

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

动画

动画是使用vuetransition组件的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数字滚动的资料请关注脚本之家其它相关文章!

相关文章

  • 详解vue项目中调用百度地图API使用方法

    详解vue项目中调用百度地图API使用方法

    这篇文章主要介绍了vue项目中调用百度地图API使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue 3.0 v-for中的Ref数组用法小结

    Vue 3.0 v-for中的Ref数组用法小结

    在 Vue 2 中,在 v-for 里使用的 ref attribute会用ref 数组填充相应的 $refs property,本文给大家介绍Vue 3.0 v-for中的Ref数组的相关知识,感兴趣的朋友一起看看吧
    2023-12-12
  • Vue keepAlive页面强制刷新方式

    Vue keepAlive页面强制刷新方式

    这篇文章主要介绍了Vue keepAlive页面强制刷新方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 详解三种方式解决vue中v-html元素中标签样式

    详解三种方式解决vue中v-html元素中标签样式

    这篇文章主要介绍了三种方式解决vue中v-html元素中标签样式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 一文带你简单理解Vue的data为何只能是函数

    一文带你简单理解Vue的data为何只能是函数

    如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,下面这篇文章主要给大家介绍了关于简单理解Vue的data为啥只能是函数的相关资料,需要的朋友可以参考下
    2022-10-10
  • Vue实现简单弹窗效果

    Vue实现简单弹窗效果

    这篇文章主要为大家详细介绍了Vue实现简单弹窗效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • vue input实现点击按钮文字增删功能示例

    vue input实现点击按钮文字增删功能示例

    这篇文章主要介绍了vue input实现点击按钮文字增删功能,涉及基于vue.js的事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • 基于vue打包后字体和图片资源失效问题的解决方法

    基于vue打包后字体和图片资源失效问题的解决方法

    下面小编就为大家分享一篇基于vue打包后字体和图片资源失效问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    这篇文章主要介绍了vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定的相关知识,本文通过实例代码相结合的形式给大家介绍的非常详细 ,需要的朋友可以参考下
    2018-09-09
  • 你知道vue data为什么是一个函数

    你知道vue data为什么是一个函数

    本篇文章从javascript原型链来解释为什么vue中data必须是一个函数,解释一下这部分的原理内容,感兴趣的朋友跟随小编一起看看吧
    2021-11-11

最新评论