vue-countTo a vue component that will count to a target number at a specified duration

Related tags

vue vue-component countup
Overview

vue-countTo

It's a vue component that will count to a target number at a specified duration

vue2 Gemnasium license npm npm minified gzip

vue-countTo is a dependency-free, lightweight vue component that can be overwrited easingFn by yourself. You can set startVal and endVal ,it will automatic judge count up or count down. It is support vue-ssr. It is learn from countUp.js;

Try the demo

How to use?

npm install vue-count-to

Example

<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'>countTo>
template>

<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2017
      }
    }
  }
script>

demo:

demo

Use CDN Script: demo

Options

Property Description type default
startVal the value you want to begin at Number 0
endVal the value you want to arrive at Number 2017
duration duration in millisecond Number 3000
autoplay when mounted autoplay Boolean true
decimals the number of decimal places to show Number 0
decimal the split decimal String .
separator the separator String ,
prefix the prefix String ''
suffix the suffix String ''
useEasing is use easing function Boolean true
easingFn the easing function Function

** notes: when autoplay:true , it will auto start when startVal or endVal change **

Functions

Function Name Description
mountedCallback when mounted will emit mountedCallback
start start the countTo
pause pause the countTo
reset reset the countTo
Issues
  • 不能显示小数点哦。。。

    不能显示小数点哦。。。

    不能显示小数点哦。。。 而且会多出来一个无用的span元素。。。 可以改造一下吗

    opened by qingbopro 3
  • 自动播放的问题

    自动播放的问题

    endVal变化时,需要手动调用start来启动动画。 建议在autoplay时, watch endVal自动开启动画

    opened by lovermaker 2
  • Server Side Rendering is broken

    Server Side Rendering is broken

    As you rely on "window" to be present, this little sweet component explodes in frameworks like NuxtJS. Could you try to avoid relying on window? For what reason do you use it anyway?

    opened by appinteractive 2
  • make update possible

    make update possible

    would be very nice to be able to update the values without the need to manually change both the start end endval.

    In my setup I have a vote mechanism where I display several options with percentage values. Anytime a user votes, the values update automatically. The issue with this component is that I can't update the values from its current values (like from 50 to 80 percent) without braking it. Any Idea how to manage that usecase?

    grafik

    By the way, thanks for that cool component. Keep up the good workd ;)

    opened by appinteractive 2
  • About `autoplay`

    About `autoplay`

    <count-to :startVal='0' :endVal='reportCount'></count-to>

    created () {
       axios.get('/api/admin/report/count')
         .then(response => {
           this.reportCount = response.data.reportCount
         })
    }
    

    以上组件会在加载时自动开始向 2017 (默认值) 计数, 即使数据请求尚未返回.

    <count-to :startVal='0' :endVal='reportCount' :autoplay='false'></count-to>

    这样需要手动触发计数很不方便.

    <count-to :startVal='0' :endVal='reportCount'></count-to>

    data () {
      reportCount: 0
    }
    

    这样其实会在加载时开始计数, 只不过一直是 0, 如果数据返回有延迟, 计数值会出现跳跃.

    Workaround:

    <count-to :startVal='0' :endVal='reportCount' :autoplay="true" v-if="typeof reportCount !== 'undefined'"></count-to>

    这样可以使组件在请求返回后才开始加载.


    我向 CountTo 组件添加了一个参数 autoplayWhenChange

    props: {
      autoplayWhenChange: {
        type: Boolean,
        required: false,
        default: true
      }
    }
    

    并修改监视器

    watch: {
      startVal () {
        if (this.autoplay || this.autoplayWhenChange) {
          this.start()
        }
      },
      endVal () {
        if (this.autoplay || this.autoplayWhenChange) {
          this.start()
        }
      }
    }
    

    <count-to :startVal='0' :endVal='reportCount' :autoplay="false" :autoplayWhenChange="true"></count-to>

    这样可以实现在请求返回后开始计数, 同时避免数字不连续的跳跃.

    这样不知道是不是一个合理的 feature.

    opened by wbswjc 2
  • 场景:递增,ease: fasle 的时候,数值不变化

    场景:递增,ease: fasle 的时候,数值不变化

    看了代码发现是这里写错了this.printVal = this.localStartVal + (this.localStartVal - this.startVal) * (progress / this.localDuration) 改为:this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration) 运行正常

    opened by uncleLian 2
  • separator参数无效

    separator参数无效

    按照官网DEMO separator 加了冒号会报错,不加会无效

    <count-to :start-val="0" :end-val="25" :duration="2600" :separator="" class="box-num"/>

    opened by yudan215 2
  • Numbers jump when text align center or right

    Numbers jump when text align center or right

    Numbers jump when text align center or right

    opened by romanmarkelov 1
  • a little suggestion

    a little suggestion

    use slot,wo we can customized the displayValue like this: 9S@`K41EPV4PLK$@{}N0IPK so we can use like this: <count-to :end-val="3000" v-slot:default="{displayValue}"{{displayValue||pipeline}}<count-to

    opened by pgeorge1324 0
  • 请问支持SSR吗?

    请问支持SSR吗?

    opened by cjlhll 0
  • 自己更新了一个基于vue3的版本

    自己更新了一个基于vue3的版本

    自己更新了一个基于vue3的版本,大家可以去试用下,使用方式和这个一摸一样,只是在原有的基础上进行改进(原作者的代码是相当优秀的),点击查看

    opened by xiaofan9 1
  • 能不能设置默认值,有默认值效果会很不好

    能不能设置默认值,有默认值效果会很不好

    我数据是0到0,有默认值会从高的降到0 效果很不好

    opened by regg1e 0
  • [Feature Request]changing from last state instead of from `start-val`

    [Feature Request]changing from last state instead of from `start-val`

    <count-to :start-val="0"  :end-val="val" />
    <script>
    methods:{
        modify() {
          this.val += 100
        }
    }
    </script>
    

    at first time execute modify() it would from 0 to 100, how could at second/more times execute modify(), let it from 100 to 200 , instead of 0 to 100 again

    opened by serfend 0
  • 请教下一个easingFn的问题

    请教下一个easingFn的问题

    easingFn: {
      type: Function,
      default(t, b, c, d) {
        // 类似这一块有啥计算方式,这个计算公司如何可得?
        return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
      }
    }
    
    opened by XdyGoGo 1
  • 单一值变动, 自动触发  demo

    单一值变动, 自动触发 demo

    <template>
        <countTo ref="count" :startVal='startVal' :endVal='endVal' :duration='1500' prefix='¥ ' suffix=' 元'></countTo>
    </template>
    
    <script>
        import countTo from 'vue-count-to';
        export default {
            components: { countTo },
            props:{
                value: Number
            },
            data () {
    
                return {
                    startVal: 0,
                    endVal: this.value
                }
            },
            watch:{
                value(newV, oldV){
                    this.endVal = newV
                    this.startVal = oldV
                    this.$refs.count.start()
                }
            }
    
        }
    </script>
    
    <style scoped>
    
    </style>
    
    
    opened by Valar103769 0
  • 为什么字体颜色变为渐变色之后动画就失效了

    为什么字体颜色变为渐变色之后动画就失效了

    为什么字体颜色变为渐变色之后动画就失效了

    opened by LIHAO520 1
  • 显示数据和我输入数据不一样

    显示数据和我输入数据不一样

    比如 我输入个 124.83394152848399706 然后小数点后保留 decimals=17 却出现了 124.83394152848399017

    opened by zzZ-F 3
Releases(v1.0.11)
Owner
花裤衩
花裤衩
Super easy magic-move transitions for Vue apps

Heads up! The fate of this repo is uncertain. I recommend using my new library, vue-flip-toolkit for all of your magic-move transition needs. vue-over

Matt Rothenberg 681 Oct 14, 2021
Super easy way to animate numbers.

animated-number-vue A simple vue animated number for Vue2, using anime. Live demo here Usage $ npm install animated-number-vue # OR $ yarn add animate

Leonardo Cardoso 182 Sep 14, 2021
[CSS GPU Animation] Marquee Text for vuejs

vue-marquee-text-component [CSS GPU Animation] Marquee Text for vuejs Demo Demo here Install Vue 3 (master) | Vue 2 (v1) npm install vue-marquee-text-

null 285 Oct 11, 2021
✨ Reusable Vue 2 transition components

vue2-transitions Demo Codesandbox ✨ Reusable component transitions Why ❓ Brings only the code that you need. Many alternative solutions import the who

BinarCode 762 Oct 14, 2021
A Vue.js directive for animating an element from height: auto; to height: 0px; and vice-versa.

v-show-slide A Vue.js directive for animating an element from height: auto to height: 0px and vice-versa. ?? 3kb (1kb gzipped) ?? No dependencies ?? T

Pete Hegman 98 Oct 5, 2021
Vue mixin factory to tween component numerical data

Vue Mixin Tween Vue mixin factory to tween component numerical data (using Tween.js). Installation npm install vue-mixin-tween Usage To tween a compon

Luke Chinworth 25 Nov 8, 2020
Super easy magic-move transitions for Vue apps

Heads up! The fate of this repo is uncertain. I recommend using my new library, vue-flip-toolkit for all of your magic-move transition needs. vue-over

Matt Rothenberg 681 Oct 14, 2021
This is a lightweight Vue 3 component made with TypeScript to quickly create an animation that shows an automatic count of any quantity in any duration, counting up or down.

This is a lightweight Vue 3 component made with TypeScript to quickly create an animation that shows an automatic count of any quantity in any duration, counting up or down.

Cristopher PS 32 Oct 12, 2021
A Vue.js 2.0 port of Animate.css. For use with Vue's built-in transitions.

vue2-animate for Vue.js 2 and 3 Cross-browser CSS3 animation library A Vue.js port of Animate.css. For use with Vue's built-in transitions. | DEMO Cre

Simon Asika 1.3k Oct 18, 2021
A flexible Vue wrapper for Animejs

Vuenime A flexible Vue wrapper for Animejs npm install vuenime # or yarn add vuenime Storybook | CodeSandbox Usage In a component: <template> <div>

Mikhail Panichev 28 Jul 9, 2021
Super easy way to animate numbers.

animated-number-vue A simple vue animated number for Vue2, using anime. Live demo here Usage $ npm install animated-number-vue # OR $ yarn add animate

Leonardo Cardoso 182 Sep 14, 2021
Easily create complex interactive animations with Vue.js

vue-kinesis Easy to use Vue.js components for creating interactive animations Demo Kinesis Demo Vue3 - Installation npm install --save [email protected]

Amine Bouyarmane 1k Oct 11, 2021
Odometer VueJS component

Odometer About Vue-Odometer Smoothly transitions numbers with ease. Use this library to give you application a smooth animation, only applicable on nu

Jeffery ThaGintoki 90 Aug 31, 2021
A Vue component for flat surface shader

vue-flat-surface-shader A Vue component for flat surface shader DEMO: Github Pages How to use npm install --save vue-flat-surface-shader Main.js impor

grzhan 124 Oct 12, 2021
Allows the components to tween their properties.

VueTween Allows the components to tween their properties. demo Try it out! dependencies Vue setup npm npm install @seregpie/vuetween ES module Install

Sergej Sintschilin 23 Sep 20, 2021
vue-book-effects is a Vue component that displays images in 3D page flip effect.

vue-book-effects is a Vue component that displays images in 3D page flip effect.

Sea 11 Aug 11, 2021
Creating a navigation menu with animations like on Stripe

Vue Stripe Menu Creating a navigation menu with animations like on Stripe Only for Vue 3 (changelog) Demo Website Vue 2 - Branch How to install Instal

Alexey Khrushch 363 Oct 12, 2021
A lightweight Vue.js plugin for page / route transitions.

vue-page-transition A lean Vue.js plugin for page / route transitions. Table of contents Installation Usage Transitions Demo Installation yarn add vue

Orlando Wenzinger 363 Oct 11, 2021
Like jQuery's slideUp/slideDown, but for Vue!

vue-slide-up-down Like jQuery's slideUp / slideDown, but for Vue! Demo: https://codepen.io/danieldiekmeier/pen/YapGWq Installation npm i vue-slide-up-

Daniel Diekmeier 190 Oct 10, 2021