
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
vue-number-animation
Advanced tools
Simple & lightweight animated number plugin designed for Vue.js 3.0 & 2.x.
Simple & lightweight animated number plugin designed for Vue.js 3.0 & 2.x. This plugin provides animated transitions for numeric values, enhancing the visual appeal of numerical data in Vue.js applications.
Explore the demo for version 1.x.x here.
To integrate the Animated Number Vue plugin into your project, follow the installation steps below.
npm install vue-number-animation
For Vue versions <=2.6 and vue-number-animation@2.x.x, ensure you also install @vue/composition-api
.
Register the Animated Number component in your Vue application as demonstrated in the code snippet below:
// For version 2.x.x - import the component as usual
import NumberAnimation from "vue-number-animation";
// For version 1.x.x
import Vue from "vue";
import VueNumber from "vue-number-animation";
Vue.use(VueNumber);
In your Vue file, utilize the Animated Number component:
// For version 2.x.x
<NumberAnimation
ref="number1"
:from="100"
:to="10000"
:format="theFormat"
:duration="5"
autoplay
easing="linear"
/>
// For version 1.x.x
<number
tag="div"
animationPaused
ref="number2"
:to="10000"
:duration="5"
easing="Back.easeIn"
@complete="completed"
@click="playAnimation"/>
Property | Description | Type | Default |
---|---|---|---|
to | Animation end point | number | 100 |
tag | Element wrapper | string | 'span' |
from | Animation start point | number | 0 |
duration | Duration of the animation (seconds) | number | 1 |
delay | Amount of delay (seconds) before the animation starts | number | 0 |
easing | Ease of the animation | string | 'linear' (for version 2.x.x) / 'Power1.easeOut' (for version 1.x.x) |
autoplay (for version 2.x.x) / animationPaused (for version 1.x.x) | Pauses animation at starting point | boolean | true (for version 2.x.x) / false (for version 1.x.x) |
For version 2.x.x: Choose from various eases to control the rate of change during the animation. Refer to animejs documentation.
For version 1.x.x: Choose from various eases to control the rate of change during the animation. Refer to GreenSock Easing documentation. Don't forget the '.' between ease name, e.g., Circ.easeInOut
.
Event | Description |
---|---|
start | Called when the animation has started |
complete | Called when the animation has completed |
update | Called every time the animation updates (on every frame while the animation is active) |
Method | Description |
---|---|
play | Starts the animation |
pause | Pauses the animation |
restart | Restarts and begins playing forward from the beginning |
FAQs
Simple & lightweight animated number plugin designed for Vue.js 3.0 & 2.x.
The npm package vue-number-animation receives a total of 3,429 weekly downloads. As such, vue-number-animation popularity was classified as popular.
We found that vue-number-animation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.