vue实现数字变换动画的示例代码

最近开发项目的时候有个屏保的部分，就几个数字觉得过于单调，索性加点特效在里边，UI图数字部分如下：

emmm。所以加了个数字动态变动的效果

一开始直接在网上copy了一份。但是部分功能不太能满足需求 ，so，改动了部分，完美实现

改动部分：

1.数字不需要千位符，但是为了防止以后要有 所以加了个参数判断，默认是没有的

2.数字整数变动

3.组件改为行内元素，能更好的兼容页面样式

4.第二次数字变动在上次的数字累加

5.添加监听器防止页面不更新的情况

代码如下：

<template>
    <span class="number-grow-warp">
        <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>
    </span>
</template>

<script>
export default {
  name:'numberGrow',
  props: {
    time: {
      type: Number,
      default: 2
    },
    value: {
      type: Number,
      default: 0
    },
    thousandSign:{
        type: Boolean,
        default:()=>false
    }
  },
  data(){
    return{
      oldValue:0
    }
  },
  watch:{
    value:function(value,oldValue){
      this.numberGrow(this.$refs.numberGrow)
    }
  },
  methods: {
    numberGrow (ele) {
      let _this = this
      let value = _this.value - _this.oldValue
      let step = (value * 10) / (_this.time * 100)
      let current = 0
      let start = _this.oldValue
      let t = setInterval(function () {
        start += step
        if (start > _this.value) {
          clearInterval(t)
          start = _this.value
          t = null
        }
        if (current === start) {
          return
        }
        current = parseInt(start)
        _this.oldValue = current
        if(_this.thousandSign){
            ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
        }else{
            ele.innerHTML = current.toString()
        }
      }, 10)
    }
  },
  mounted () {
    this.numberGrow(this.$refs.numberGrow)
  }
}
</script>

<style lang="less" scoped>
.number-grow-warp{
  transform: translateZ(0);
}
</style>

就酱紫，完美实现。

引用如下：

<template>
  <div>
      <numberGrow :value="toNowGantryNum" :time='30'></numberGrow>
  </div>
</template>

<script>
import numberGrow from '@/components/numberGrow/index.vue'
export default {
    name:'monitor',
    components:{numberGrow},
    data(){
        return{
            toNowGantryNum:1068319425,
        }
    },
}
</script>

到此这篇关于vue实现数字变换动画的示例代码的文章就介绍到这了,更多相关vue 数字变换动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue.js实现大屏数字滚动翻转效果

    大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 整体思路: 在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤,如下: 你可以审查元素,下载数字背景图片,复制图片地址,或者使用其他背景图片.背景颜色 有了以上的设计流程,我们先来简单实现一下: // CSS代码 <style> .box-item { position: relative; display: inline-

  • vue 实现数字滚动增加效果的实例代码

    项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,贴出来分享一下 ^_^ 数字滚动组件: <template> <div class="number-grow-warp"> <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</sp

  • vue 使用async写数字动态加载效果案例

    父组件 <interval-number :number-content="blockHeight" v-if="blockHeight>0"></interval-number> import IntervalNumber from './IntervalNumber.vue' components:{ IntervalNumber, } 子组件 <template> <span class="Interv

  • vue实现数字动态翻牌的效果（开箱即用）

    vue实现数字动态翻牌的效果（开箱即用）

    实现效果图 原理 将1~9的数字竖直排版,通过translate移动位置显示不同数字,使用transition控制transform属性有动画效果 技术点 css 属性 writing-mode: vertical-lr,使数字竖直排版 移动  transform: translate(-50%, -40%); y值控制移动至哪个数字 transition  控制transform属性有动画效果 实现代码(注释比较详细,不再赘述) <!-- * @Author: mat * @Date: 201

  • vue实现数字滚动效果

    本文实例为大家分享了vue实现数字滚动的具体代码,供大家参考,具体内容如下 <template> <div class="num-block"> <div class="num-block_show"> <div class="num-block_numbers" :class="{'ellipsis': !isNum(item)}" v-for="(item, key) i

  • Vue组件实现数字滚动抽奖效果

    Vue组件实现数字滚动抽奖效果

    本文实例为大家分享了Vue组件实现数字滚动抽奖效果的具体代码,供大家参考,具体内容如下 可调整数字滚动速度,可指定开奖延迟时间,可指定开奖数字,按个人需求自行改动(录了个效果供参考,临时找的录屏,表介意)不一一精简了 组件代码 <template>     <div class="info-span04" style="color: #333333;">         中奖号码:         <div style="ve

  • vue实现移动端H5数字键盘组件使用详解

    本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码,供大家参考,具体内容如下 我们平时扫码付款的时候,经常会输入一些数字进行付款,仔细看了下键盘和系统的键盘有点不一样,于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个.话不多说,直接上代码. 结果如下: 代码如下: <template> <div class="keyboard-wrapper"> <input type="text" v-model="NUM

  • 基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

    基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

    实现目标 浏览各大云平台,发现一个页面特效使用较为频繁,以"百度云"为例(https://cloud.baidu.com/),进入百度云后,当滚动条滚动至"更可靠的数据支持"模块时,页面数据将会开始滚动式增长特效.下面将会介绍我的解决方案,希望有同行更好的解决方案大家一起交流. 解决思路 主要的解决要点如下: 如何实现数字动画的效果 如何监听滚动条到指定的位置 分解要点寻找解决思路: 一.如何实现数字动画的效果 在vue的官方文档(https://cn.vuejs.

  • vue实现数字变换动画的示例代码

    vue实现数字变换动画的示例代码

    最近开发项目的时候有个屏保的部分,就几个数字觉得过于单调,索性加点特效在里边,UI图数字部分如下: emmm.所以加了个数字动态变动的效果 一开始直接在网上copy了一份.但是部分功能不太能满足需求 ,so,改动了部分,完美实现 改动部分: 1.数字不需要千位符,但是为了防止以后要有 所以加了个参数判断,默认是没有的 2.数字整数变动 3.组件改为行内元素,能更好的兼容页面样式 4.第二次数字变动在上次的数字累加 5.添加监听器防止页面不更新的情况 代码如下: <template> <s

  • Vue中实现过渡动画效果示例代码

    Vue中实现过渡动画效果示例代码

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 同时设置两种动画(了解) 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在R

  • 基于Vue3实现数字华容道游戏的示例代码

    基于Vue3实现数字华容道游戏的示例代码

    目录 前言 环境 思路 实现 GameCnt GameTool GamePass GameTip Menu 最后 前言 恰逢春之四月,天气忽热忽凉,遇游戏大赛,以笨拙之技,书一篇小文. 游戏规则:存在n*n的格子,需要将它们按数字顺序或图片顺序一一还原即可. 环境 主要环境: vue3 version:3.2.4 vite version:2.5.0 vue-router version:4.0.14 注:这个游戏的路由使用的是自动路由插件 主要插件: windicss version:3.5.

  • vue制作抓娃娃机的示例代码

    去年为联通制作双十一活动,做四个小游戏:'配对消消乐'.移动拼图.抓娃娃.倒计时. 现在先做来分享一下制作抓娃娃游戏时的经验 先上效果图 游戏规则:在指定时间内抓到上图四张卡片为挑战成功. 现在直接说游戏主要内容:娃娃滚动.爪子向下抓取.抓到卡片 废话不多说直接上代码!(此样式是根据需求而定) <!--布局样式--> <div class="game"> <!--爪子--> <div class="paw"> <

  • Android动画系列之帧动画和补间动画的示例代码

    Android动画系列之帧动画和补间动画的示例代码

    Android 提供三种动画:帧动画.补间动画和属性动画,本篇文章介绍帧动画以及补间动画的使用,属性动画的使用将在后面的文章中分享,那就来复习一下这两种动画的使用吧. FrameAnimation FrameAnimation 即逐帧动画,通俗来说就是按照图片动作顺序依次播放来形成动画,创建 FrameAnimation 可用 xml 定义也可直接使用代码创建. xml创建帧动画 在 res/drawable 文件夹下创建一个 drawable 文件,使用 animation-list 标签,具

  • vue+echarts5实现中国地图的示例代码

    vue+echarts5实现中国地图的示例代码

    使用echarts5.0版本实现中国地图,E charts在5.0版本之后,地图不能直接引入了,需要自己去下载. 地图文件下载地址:下载地址(http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5) 注意: 将下载后的json文件放置/public目录下 map类型的地图 <template> <

  • vue使用iframe嵌入网页的示例代码

    1.列表页面: this.$router.push({ name: 'userTemplate', params: { reportUrl: reportUrl, reportType: reportType }}) 点击查看后触发事件,带入参数跳转到userTemplate页面:reportType有两种类型,0表示reportUrl是绝对网址,1表示reportUrl是本地html文件. 2.userTemplate页面: <template> <div> <iframe

  • vue语法之拼接字符串的示例代码

    vue语法之拼接字符串的示例代码

    本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" /> </d

  • vue父子组件的嵌套的示例代码

    vue父子组件的嵌套的示例代码

    本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件: var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ t

  • Android 仿余额宝数字跳动动画效果完整代码

    Android 仿余额宝数字跳动动画效果完整代码

    一:想都不用想的,有图有真相,看着爽了,在看下面源码 二:实例源码分析 ①:首先定义接口 package com.demo.tools.view; /** * 数字动画自定义 * * @author zengtao 2015年7月17日 上午11:48:27 * */ public interface RiseNumberBase { public void start(); public RiseNumberTextView withNumber(float number); public R

随机推荐