{"id":16962013,"url":"https://github.com/wangdahoo/vue-animate-number","last_synced_at":"2025-03-21T15:46:43.822Z","repository":{"id":43673381,"uuid":"87772116","full_name":"wangdahoo/vue-animate-number","owner":"wangdahoo","description":"animate-number as a vue component.","archived":false,"fork":false,"pushed_at":"2017-07-07T09:21:38.000Z","size":69,"stargazers_count":106,"open_issues_count":11,"forks_count":16,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-29T07:45:00.074Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://wangdahoo.github.io/vue-animate-number/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wangdahoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-10T05:58:50.000Z","updated_at":"2024-02-06T06:07:18.000Z","dependencies_parsed_at":"2022-09-09T16:50:44.206Z","dependency_job_id":null,"html_url":"https://github.com/wangdahoo/vue-animate-number","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangdahoo%2Fvue-animate-number","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangdahoo%2Fvue-animate-number/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangdahoo%2Fvue-animate-number/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangdahoo%2Fvue-animate-number/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wangdahoo","download_url":"https://codeload.github.com/wangdahoo/vue-animate-number/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244825263,"owners_count":20516587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T23:04:58.135Z","updated_at":"2025-03-21T15:46:43.792Z","avatar_url":"https://github.com/wangdahoo.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Animate Number\n\n## [Demo](https://wangdahoo.github.io/vue-animate-number/)\n\n## How to Use\n\n#### install\n\n```bash\n$ npm install vue-animate-number\n```\n\n#### as a vue plugin\n\n```js\nimport Vue from 'vue'\nimport VueAnimateNumber from 'vue-animate-number'\nVue.use(VueAnimateNumber)\n```\n\n#### examples\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003canimate-number\n      from=\"1\" \n      to=\"10\" \n      duration=\"1000\" \n      easing=\"easeOutQuad\"\n      :formatter=\"formatter\"\n    \u003e\u003c/animate-number\u003e\n\n    \u003c!-- parseInt as default formatter --\u003e\n    \u003canimate-number from=\"1\" to=\"10\"\u003e\u003c/animate-number\u003e\n    \n    \u003c!-- manually start animation by click --\u003e\n    \u003canimate-number ref=\"myNum\" from=\"0\" to=\"10\" mode=\"manual\" :formatter=\"formatter\"\u003e\u003c/animate-number\u003e\u003cbr\u003e\n    \n    \u003cbutton type=\"button\" @click=\"startAnimate()\"\u003e animate! \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    methods: {\n      formatter: function (num) {\n        return num.toFixed(2)\n      },\n\n      startAnimate: function () {\n        this.$refs.myNum.start()\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n\u003e more `easing` effects: https://github.com/jeremyckahn/shifty/blob/master/src/easing-functions.js\n\n\u003e more examples: https://github.com/wangdahoo/vue-animate-number/blob/master/index.html\n\n\n## API\n```html\n\u003canimate-number \n  mode=\"auto\"\n  duration=\"1000\"\n  :from=\"from\" \n  :to=\"to\"\n  from-color=\"#44CC00\" \n  to-color=\"#ec4949\"\n  :formatter=\"formatter\" \n  :animate-end=\"animateEnd\"\u003e\n\u003c/animate-number\u003e\n```\n| prop name | type | description | default | required |\n|-----|-----|-----|-----|-----|\n| mode | string | `auto` or `manual`, trigger animation immediately or not | `auto` | N |\n| from | number | value, at which animate starts | - | Y |\n| to | number | value, at which animate ends | - | Y |\n| fromColor | string | start color for gradient, in hex format | - | N |\n| toColor | string | end color for gradient, in hex format | - | N |\n| formatter | Function | value formatter for number in every step during the animation  | `parseInt` | N |\n| animateEnd | Function | callback after animation | - | N |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangdahoo%2Fvue-animate-number","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwangdahoo%2Fvue-animate-number","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangdahoo%2Fvue-animate-number/lists"}