@frankhoodbs/number-animation-cmp
v1.3.8
Published
Number Animation component
Downloads
346
Keywords
Readme
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>