leocardoso94 / animated-number-vue

Super easy way to animate numbers.

Hello 🌎, I'm Leonardo 👋 🇧🇷

Co-founder at Luna

animated-number-vue's Issues

Problem formatting number

Hi, your component is what I was looking for, however I'm having problems when I pass values to the animated-number tag, i.e I set value to 14881 and it shows 14881000000001222, I've tried with toFixed(3) but some times I have small numbers and it adds three zeros to the end :

<animated-number :value="total_candidates ? total_candidates : 18000" :duration="1000" />

I have numbers from 0 to 500.000 and I want it to show numbers without a lot of extra values.

Is there a way to define that step will be one by one?
How to avoid the sobrant numbers and maybe format it with hundred dot?

不支持千分位，？

1,000 这种效果吗？

a bug

The value bound with this component does not match the actual value
<div class="row"> <div class="col"> <div class="overview-quantity"> {{guide.work}} <animated-number class='text-pl' key="yzs_work" :formatValue="format" :value="guide.work" :duration="600" /> </div> <div class="overview-footer">带团</div> </div> <div class="col"> <div class="overview-quantity"> {{guide.mountGuard}} <animated-number class='text-rl' key='yzs_mountGuard' :formatValue="format" :value="guide.mountGuard" :duration="600" /> </div> <div class="overview-footer">在岗</div> </div> <div class="col"> <div class="overview-quantity"> {{guide.all}} <animated-number class='text-pl' key="yzs_all" :formatValue="format" :value="guide.all" :duration="600" /> </div> <div class="overview-footer">全部</div> </div> </div>

the font of white is actual value and the other color is use the component

Round attribute description

I see that the round attribute has type number in description, but it's not works as number.
I expected that i could set 0 for removing numbers after decimal separator. Then i set true and it's works.

a good feature to implement

Any option to bind the value inside an html tag value?

Example of how to use the easing prop

I can't get the easing prop to work. Please could someone provide an example? There's none in the docs or demo. Thanks!

Large numbers (e.g. 1e21) are not handled correctly

Repro: https://codesandbox.io/s/animated-number-vue-forked-9we6c

Error using NUXT

Hi im using NuxJs and im receiving error:

Unexpected token <

Here's the code applied.
https://codesandbox.io/s/m30p34wpw8?fontsize=14

Allow rounding

Is there currently any way to enable the round feature of animejs?

For example https://www.npmjs.com/package/animejs#dom-attributes

anime({
  targets: input,
  value: 1000 // Animate the input value to 1000
  round: 1 // Remove decimals by rounding the value
});

How to always start from 0

<animated-number/> seems to always start counting from 0 OR the last value it counted to - this makes sense for many use cases. My use case requires that I always start counting from 0. I'm using <animated-number/> within a component that is loaded on each page, with a different value per page. Each page is not concerned with the previous page's value and should start counting from 0.

Any advice would be very welcome :)

how to define start value

is there any way to define start counting value ?
As you know, by default counting animation starts from zero, so what if I want the count animation to start at 1 ? Is this feature available?

Formatting numbers

Hello,

I think this is a great library and thanks for creating it.

One issue though:
When using number like "09" (for example) it gets auto formatted to "9". Wouldn't it be better if the user did the formatting by default and not the tool? Because I have a lot of cases where I want it to be "09".

the to="" attribute seems to be taking in only the 0th element of an array.

In a vue project, i have made a component similar to bootstrap pills, which shows a numeric value in each of 3 tab's details, i have attached the animateNumber function with the click. The to="" attribute gets the requisite value from a list, to="" seems to have been using just the first element every time, tho i have written the code in order to bind it to diff values depending on the selected pill.

e.g., arr=[1000,2000,3000]

i have looped the value for the to="" attribute according to the selected pills. but somehow the to="" value remains 1000, i.e. the first element of the array for all the three pills.

For some reason, I'm unable to copy the whole code in this comment itself, so I will be writng them below in the next two comments.

Vue 3 support

i will upgrade one of my project who have your module, do you plan to make it work with vue 3

支持vue3吗

支持vue3吗