支持在渲染时进行回调操作。

README.md

@@ -54,6 +54,8 @@ Use CDN Script: [demo](https://github.com/PanJiaChen/vue-countTo/blob/master/dem
 | suffix     | the suffix | String | '' |
 | useEasing     | is use easing function | Boolean | true |
 | easingFn     | the easing function | Function | — |
+| updateFn     | the update function called before next frame | Function | — |
+
 
 ** notes: when autoplay:true , it will auto start when startVal or endVal change **
 

demo/index.html

@@ -38,6 +38,12 @@ <h3> count down example</h3>
           <count-to ref='example2' class='example2' :start-val='2017' :end-val=0 :duration=8000></count-to>
           <div class='example-btn' @click='start2'>start</div>
         </div>
+        <div class="example-item">
+          <h3> animation with update callback</h3>
+          <code> &lt;count-to :startVal=&#x27;2017&#x27; :endVal=&#x27;0&#x27; :duration=8000 :update-fn="callbackUpdate" mark="exampleUpdate"&gt;&lt;/count-to&gt;</code>
+          <count-to ref='exampleUpdate' class='example2' :start-val='2017' :end-val=0 :duration=8000 :update-fn="callbackUpdate" mark="exampleUpdate"></count-to>
+          <div class='example-btn' @click='startUpdate'>start</div>
+        </div>
         <div class="example-item">
           <h3> custom example</h3>
           <count-to ref='example3' class='example3' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals'
@@ -131,6 +137,9 @@ <h3> custom example</h3>
         callback() {
           console.log('callback')
         },
+        callbackUpdate(timestamp,value,mark) {
+          console.log(timestamp,value,mark)
+        },
         start1() {
           this.$refs.example1.start();
         },
@@ -140,6 +149,9 @@ <h3> custom example</h3>
         start3() {
           this.$refs.example3.start();
         },
+        startUpdate() {
+          this.$refs.exampleUpdate.start();
+        },
         pauseResume() {
           this.$refs.example3.pauseResume();
         }

src/vue-countTo.vue

@@ -55,6 +55,11 @@ export default {
       required: false,
       default: ''
     },
+    mark: {
+      type: String,
+      required: false,
+      default: ''
+    },
     useEasing: {
       type: Boolean,
       required: false,
@@ -65,6 +70,11 @@ export default {
       default(t, b, c, d) {
         return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
       }
+    },
+    updateFn: {
+      type: Function,
+      default(timestap, printVal, markCode) {
+      }
     }
   },
   data() {
@@ -161,6 +171,7 @@ export default {
 
       this.displayValue = this.formatNumber(this.printVal)
       if (progress < this.localDuration) {
+        this.updateFn(timestamp, this.printVal, this.mark);
         this.rAF = requestAnimationFrame(this.count);
       } else {
         this.$emit('callback');