@frankhoodbs/number-animation-cmp NPM

Number Animation Cmp

Component that creates an animation on a displayed number.

Version License

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>

vue

@everything-registry/sub-chunk-340

1 year ago

6 months ago

6 months ago

7 months ago

7 months ago