animated-number-vue3

支持vue3的数字增长动画,支持多数字.
2,187 5
vue vue3 animation animated number animated number vue animated vue number vue animation animation-number
Install
npm install animated-number-vue3
Latest Version:0.0.8
License:MIT
Last Updated:Jun 3, 2024
Links: GitHub  ·  npm
Maintainer: silentcm

animated-number-vue3

预览

安装

$ npm install animated-number-vue3
# OR
$ yarn add animated-number-vue3

开始
import AnimatedNumber from 'animated-number-vue3'
app.use(AnimatedNumber)

<AnimatedNumber :from="0" :to="1000"></AnimatedNumber>
----------------------
<AnimatedNumber :from="0" :to="1000">
  <template #default="{ option, item }">
    <h1>{{ item.number }}</h1>
  </template>
</AnimatedNumber>
也可使用插槽来自定义界面等操作，option为整个动效包含内容的对象，item里面包含变动的数字，当from和to传的是一个数字时，为单数字动效，此时值必须为number

如果想一次性为多个数字做动效，此插件也提供插槽来自定义
<AnimatedNumber :from="{
  number1:0,
  number2:0
}" :to="{
  number1:100,
  number2:100
}">
  <template #default="{ option, item }">
    <h1>{{ item.number1 }}</h1>
    <h1>{{ item.number2 }}</h1>
  </template>
</AnimatedNumber>

from和to的对象key必须为一样，一个开始一个结束的值

Props

组件的props定义

Prop Name Type Description
type String 默认为single multiple
to Number 动效结束完的值，默认为0
from Number 动效初始化的值，默认为0
round Number 默认为1
easing String 默认为linear
duration Number 动效时间 默认1000
options Number 扩展，依赖于animejs

github

Related Packages

vue-number-animation

Simple & lightweight animated number plugin designed for Vue.js 3.0 & 2.x.

468,076 76
animated number animation number vue vue animated vue animation vue number vue3 animate number counter reverse +5
vue-animation-counter

Animated number transition library for Vue.js

2,492
animated number animation number vue vue animated vue animation vue number vue3 animate number counter reverse +11
vue-pose

A declarative animation library for Vue

99,563 20,150
animation vue vue animation declarative dom popmotion
hugeicons-animated-vue

Animated Hugeicons for Vue 3. Copy-paste source, or import the components.

1,718 8
animated animation vue vue3 components hugeicons icons motion motion-v svg
@morev/vue-transitions

Shareable Vue transitions library

412,603 222
animation vue transition

Version History

Version Released License
0.0.8 MIT
0.0.7 MIT
0.0.6 MIT
0.0.5 MIT
0.0.4 MIT