vue-number-animation

대분류

라이브러리

소분류

JS Library

설명

숫자가 올라가는 애니메이션

유형

Vue

주요 레퍼런스

https://codesandbox.io/p/sandbox/8256nwlq78

프레임워크

Vue

언어

최종 편집 일시

2024/10/27 15:46

생성 일시

2024/01/05 07:24

11 more properties

설명

지정된 숫자까지 숫자가 증가하는 애니메이션을 생성

설치

npm install vue-number-animation --save
JavaScript
복사

사용법

•

Script

import Vue from 'vue'
import VueNumber from 'vue-number-animation'
Vue.use(VueNumber)
JavaScript
복사

•

html

◦

from : 시작할 숫자 번호

◦

to: 끝날 숫자 번호

◦

duration: animation 진행 시간을 지정한다.

<template>
    <div>
        <div class="today">
            <p>What day is it today?</p>
            <div>
                <number class="number" :from="0" :to="2020" :duration="2"/>
                /
                <number class="number" :from="0" :to="12" :duration="2"/>
                /
                <number class="number" :from="0" :to="5" :duration="2"/>
            </div>
        </div>
    </div>
</template>
JavaScript
복사

•

css

<style>
    .today {
        margin: 50px auto;
        text-align: center;
    }

    .today p {
        font-size: 70px;
        line-height: 1;
    }

    div {
        margin: 50px 0 0 0;
        padding: 30px;
        font-size: 40px;
        font-weight: bold;
        color: #707070;
    }

    .number {
        letter-spacing: 2px;
        background: #FFDBDB;
        padding: 10px 20px;
        border-radius: 20px;
    }
</style>
JavaScript
복사

vue-number-animation

설명

설치

사용법

예시