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 = thislet value = _this.value - _this.oldValuelet step = (value * 10) / (_this.time * 100)let current = 0let start = _this.oldValuelet t = setInterval(function () {start += stepif (start > _this.value) {clearInterval(t)start = _this.valuet = null}if (current === start) {return}current = parseInt(start)_this.oldValue = currentif(_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>

就酱紫，完美实现。

vue 数字变动动画实现相关推荐

gsap数字增长动画
更新于:2021-09-18 数字增长动画 a.vue 基于vue2和gsap(3.7.0) 仅支持到小数点后6位 a.vue <span>{{ totalNodeCount ? tota ...
vue3数字滚动动画
vue3数字滚动动画 1.新建组件vue-countTo.vue 2.引入animationFrame.js 3.页面上使用 1.新建组件vue-countTo.vue <template> ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
qt同时两个动画执行_Qt实现数字滚动动画效果
自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html Qt实现数字滚动动画效果 3. ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
python matplotlib animation制作世界人口变动动画
python matplotlib animation制作世界人口变动动画主要利用animation 做了个世界人口动画,数据从网上下载的.做成json格式的.读入pandas.没有放数据, 只是弄 ...
android金币动效_Android 仿余额宝数字跳动动画效果完整代码
一:想都不用想的,有图有真相,看着爽了,在看下面源码二:实例源码分析 ①:首先定义接口 package com.demo.tools.view; /** * 数字动画自定义 * * @author ...
基于VUE的SVG动画处理（一）
基于VUE的SVG动画处理(一) 提示:涉及vue.photoshop.svg动画一.创建SVG文件方法一:使用photoshop绘制所需接线图,导出svg格式. 第一种:快速导出SVG编辑-&g ...
Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画
系列文章 Flutter 旋转动画 - RotationTransition Flutter 平移动画 - 4种实现方式 Flutter 淡入淡出与逐渐出现动画 Flutter 尺寸缩放.形状.颜色. ...

vue 数字变动动画实现

vue 数字变动动画实现相关推荐

最新文章

热门文章