fix: apply dot bounce animation duration correctly

Author: setaman

src/App.vue

@@ -53,7 +53,7 @@
           }"
         >
         </ve-progress>
-        <ve-progress :progress="progress" dot="20" animation="loop 1000 2000" half> </ve-progress>
+        <ve-progress :progress="progress" dot="20" animation="bounce 1000 2000"> </ve-progress>
       </div>
       <ve-progress half line-position="center" :progress="0" :line="parseInt(progress) === 0 ? 'butt' : 'round'">
         <template #default="{ counterTick }">

src/components/Circle/CircleDot.vue

@@ -59,7 +59,7 @@ export default {
         },
         bounce: {
           opacity: 0,
-          "animation-duration": `${this.animationDuration + 500}ms`,
+          "animation-duration": `${this.options.animation.duration + (this.options.animation.duration * 10) / 100}ms`,
         },
       };
       return styles[this.options.animation.type];

tests/unit/circle/circle-animation.spec.js

@@ -131,7 +131,7 @@ describe("#animation", () => {
           parseRawOptions({ progress: 50, dot: 5, animation: "bounce 500 0" }),
           CircleContainer
         ).findComponent(CircleDot).element.style.animationDuration
-      ).to.equal(`${expectedDuration}`);
+      ).to.equal(`${expectedDuration}ms`);
     });
   });