leocardoso94 / animated-number-vue Goto Github PK
View Code? Open in Web Editor NEWSuper easy way to animate numbers.
Home Page: https://codesandbox.io/s/v68x95mo30
License: MIT License
Super easy way to animate numbers.
Home Page: https://codesandbox.io/s/v68x95mo30
License: MIT License
I can't get the easing prop to work. Please could someone provide an example? There's none in the docs or demo. Thanks!
ζ―ζvue3ε
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
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?
1,000 θΏη§ζζεοΌ
<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 :)
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.
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.
i will upgrade one of my project who have your module, do you plan to make it work with vue 3
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
});
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".
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?
Any option to bind the value inside an html tag value?
Hi im using NuxJs and im receiving error:
Unexpected token <
Here's the code applied.
https://codesandbox.io/s/m30p34wpw8?fontsize=14
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.