Merge pull request #211 from setaman/v2-fix-transition-for-safari

fix: initial animation/transition on Safari

Author: setaman

src/App.vue

@@ -44,12 +44,12 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
-        <ve-progress :progress="progress" animation="rs 2000 2000" :legend-formatter="customFormatter" >
+        <ve-progress :progress="progress" animation="bounce 3000 300" :legend-formatter="customFormatter" :loading="loading" half >
           <template #legend>
             <span id="my-slot">Hello Circle</span>
           </template>
         </ve-progress>
-        <ve-progress
+<!--        <ve-progress
           :progress="progress"
           :determinate="determinate"
           :size="size"
@@ -67,7 +67,7 @@
           <template #legend-caption>
             <p>hello</p>
           </template>
-        </ve-progress>
+        </ve-progress>-->
       </div>
     </div>
   </div>

src/components/Circle/Circle.vue

@@ -54,6 +54,7 @@
       </g>
     </fade-in-transition>
     <circle
+      ref="circleProgress"
       class="ep-circle--progress"
       :class="animationClass"
       :r="radius"

src/components/Circle/CircleContainer.vue

@@ -257,6 +257,10 @@ g.ep-circle--container {
 
 .ep-circle--progress {
   animation-timing-function: ease-in-out;
+  &.ep-animation-playing {
+    // Workaround only required for older Apple systems and Safari browser
+    transition: none !important;
+  }
   &.animation__default {
     animation-name: ep-progress--init__default;
   }

src/components/Circle/HalfCircle.vue

@@ -47,6 +47,7 @@
       </g>
     </fade-in-transition>
     <path
+      ref="circleProgress"
       :stroke-width="options.thickness"
       class="ep-half-circle--progress ep-circle--progress"
       :class="animationClass"

src/components/Circle/circleMixin.js

@@ -13,6 +13,7 @@ export default {
   },
   data: () => ({
     isInitialized: false,
+    isAnimationPlaying: false,
   }),
   computed: {
     progress() {
@@ -44,6 +45,7 @@ export default {
 
     animationClass() {
       return [
+        this.isAnimationPlaying && "ep-animation-playing",
         `animation__${
           !this.options.loading && this.dataIsAvailable && this.isInitialized ? this.options.animation.type : "none"
         }`,
@@ -146,12 +148,32 @@ export default {
     getBounceInOffset() {
       return this.circumference - this.progressOffset < 100 ? this.progressOffset : this.progressOffset + 100;
     },
+    toggleIsAnimationPlaying() {
+      this.$nextTick(() => {
+        this.isAnimationPlaying = !this.isAnimationPlaying;
+      });
+    },
   },
   async mounted() {
+    const circle = this.$refs.circleProgress;
+    if (circle) {
+      // this is only required for older MacOS/IOS versions and Safari. On Apple system the transition is triggered
+      // right after initial animation causing the progress line rendered twice. So we track animation state to
+      // add/remove CSS transition properties
+      circle.addEventListener("animationstart", this.toggleIsAnimationPlaying, false);
+      circle.addEventListener("animationend", this.toggleIsAnimationPlaying, false);
+    }
     if (!this.options.loading) {
       // await initial delay before applying animations
       await wait(this.options.animation.delay);
     }
     this.isInitialized = true;
   },
+  unmounted() {
+    const circle = this.$refs.circleProgress;
+    if (circle) {
+      circle.removeEventListener("animationstart", this.toggleIsAnimationPlaying, false);
+      circle.removeEventListener("animationend", this.toggleIsAnimationPlaying, false);
+    }
+  },
 };