https://github.com/xiaoluoboding/vue-digit-animation

A digit animation component with wheel/slide effect for Vue 3.
https://github.com/xiaoluoboding/vue-digit-animation

animation component-library digital slide vue3 wheel

Last synced: 12 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/xiaoluoboding/vue-digit-animation
• Owner: xiaoluoboding
• License: mit
• Created: 2020-09-22T02:25:37.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-27T01:57:50.000Z (over 3 years ago)
• Last Synced: 2024-10-12T02:42:54.806Z (about 1 month ago)
• Topics: animation, component-library, digital, slide, vue3, wheel
• Language: Vue
• Homepage: https://vue-digit-animation.vercel.app/
• Size: 1.69 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Digit Animation



  

  

  



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

## Preview

### Gif

![vue-digit-animation](https://cdn.jsdelivr.net/gh/xiaoluoboding/image-hub@latest/images/2020/11/202011_vue-digit-animation.gif)

### Online Demo

[Edit on CodePen](https://codepen.io/xiaoluoboding/pen/NWrJGJq)

### Vercel

[vue-digit-animation.vercel.app/](vue-digit-animation.vercel.app/)

### Codesandbox

[![Edit Digit Wheel Animation For Vue 3 Demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/digit-wheel-animation-for-vue-3-demo-df5k2?fontsize=14&hidenavigation=1&theme=dark)

## Installation

```bash

npm i vue-digit-animation -S

or

yarn add vue-digit-animation -S

```

## Import

### Import all the components

```js

// 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

```js

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

export default {

  components: {

    DigitAnimationGroup,

    DigitWheel

  }

  ...

}

```

## Usage

### DigitWheel

Single `` component for display single digit with wheel effect

**Demo**

```html

```

**Template**

```typescript

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 `` or `` component for display multiple digits

**Template**

```html

```

**Props**

```typescript

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

```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](https://github.com/xiaoluoboding)