这是一个基于anime动画库的数字增长动画组件，适用于动态图表统计中，可以设置动画效果时长、延时以及基于easing的动画效果。
安装
我们通过npm安装
npm install --save animated-number-vue
应用
<template> <animated-number :value="value" :formatValue="formatToPrice" :duration="300" ></animated-number></template><script>import AnimatedNumber from "animated-number-vue";export default { components: { AnimatedNumber }, data() { return { value: 1000 } }, methods: { formatToPrice(value) { return `$ ${value.toFixed(2)}`; } }};</script>
组件参数
只有value属性是必须的，其他选项可选。
value Number, String 用于动画效果的数值 duration Number 动画效果时长 delay Number 动画效果延时 easing String 动画效果easing function
更多使用说明请查看项目地址：https://github.com/Leocardoso94/animated-number-vue
以上就上有关基于animate动画库的数字增长动画组件的相关介绍，要了解更多Vue.js,javascript内容请登录学步园。