1.3.8 • Published 1 day ago
@frankhoodbs/number-animation-cmp v1.3.8
Number Animation Cmp
Component that creates an animation on a displayed number.
Props
Name | Type | Description |
---|---|---|
data-start-value | number | Required Starting value of the number. |
data-end-value | number | Required Ending value of the number. |
data-start-animation | boolean | Boolean to control the timing of the start of the animation, defaults to true so animation starts immediatly. |
data-step | number | Controls the increment on each step of the animation, defaults to 1. |
data-duration | number | Defines the duration of the animation (millisecons), defaults to 5000ms |
Slots
Name | Props | Description |
---|---|---|
default | number | Slot that autofeeds the number to be printed |
Usage/Examples
<div class="container">
<number-animation-cmp
:data-duration="10000"
:data-start-value="0"
:data-end-value="1000000"
:data-start-animation="uela"
:data-step="100"
>
<template #default="{ number }">
{{ number.toFixed(0) }}
</template>
</number-animation-cmp>
<number-animation-cmp
:data-duration="10000"
:data-start-value="0.001"
:data-end-value="1.0"
:data-step="0.01"
>
<template #default="{ number }">
{{ number.toFixed(2) }}
</template>
</number-animation-cmp>
<number-animation-cmp
:data-duration="8000"
:data-start-value="-100000000"
:data-end-value="1000000"
:data-step="500000"
>
<template #default="{ number }">
{{ number.toFixed(0) }}
</template>
</number-animation-cmp>
</div>
1.3.7
1 day ago
1.3.4
2 days ago
1.3.8
1 day ago
1.3.3
6 days ago
1.3.2
19 days ago
1.3.1
22 days ago
1.3.0
23 days ago
1.2.17
23 days ago
1.2.16
2 months ago
1.2.14
2 months ago
1.2.15
2 months ago
1.2.13
2 months ago
1.2.12
3 months ago
1.2.11
3 months ago
1.2.10
4 months ago
1.2.9
4 months ago
1.2.8
4 months ago
1.2.7
4 months ago
1.2.6
4 months ago
1.2.3
4 months ago
1.2.2
4 months ago
1.2.1
4 months ago
1.0.11
7 months ago
1.0.10
7 months ago
1.0.6
7 months ago
1.0.5
7 months ago
1.0.3
7 months ago
1.0.2
7 months ago
1.0.1
7 months ago
1.0.0
7 months ago