Package Exports

vue-digit-animation

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-digit-animation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Digit Animation

A digit animation component with wheel/slide effect for Vue 3.

Preview

Gif

vue-digit-animation

Online Demo

Edit on CodePen

Vercel

vue-digit-animation.vercel.app/

Codesandbox

Installation

npm i vue-digit-animation -S
or
yarn add vue-digit-animation -S

Import

Import all the components

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import VueDigitAnimation from 'vue-digit-animation'

createApp(App)
  .use(VueDigitAnimation)
  .mount('#app')

Use in your component

import { DigitAnimationGroup, DigitWheel } from 'vue-digit-animation'

export default {
  components: {
    DigitAnimationGroup,
    DigitWheel
  }
  ...
}

Usage

DigitWheel

Single <digit-wheel> component for display single digit with wheel effect

Demo

<digit-wheel
  size="6xl"
  use-ease="Quit.easeInOut"
  :digit="6"
  :duration="1000"
/>

Template

interface DigitProps {
  digit: number; // the digit value
  size: string; // the digit preset font-size or custom font-size
  duration: number; // Sets the length of time that animation completed, Unit is milliseconds(1000)
  useEase: string; // transition easing function
}

DigitAnimationGroup

A group of <digit-wheel> or <digit-ruler> component for display multiple digits

Template

<digit-animation-group
  size="6em"
  format="0,0"
  use-ease="Quit.easeInOut"
  stagger
  :digits="9527"
  :duration="1000"
/>

Props

interface DigitsProps {
  digits: number; // the digits value
  size: string; // the digits preset font-size or custom font-size
  gutter: number; // digits Spacing, default is 0px
  duration: number; // sets the length of time that animation completed, Unit is milliseconds(1000)
  stagger: boolean; // whether animation display with stagger effect
  useEase: string; // transition easing function
  format: string; // provide number format use numeral (0,0)
}

With TypeScript

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

// declare `vue-digit-animation` as a module
declare module 'vue-digit-animation'

License

MIT @xiaoluoboding