基于animate动画库的数字增长动画组件

作者：月光光 2018年11月10日 11:08helloweba.net 标签：Vue.js  JavaScript 

这是一个基于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

你可能感兴趣的文章

共0条评论