fix(MdProgressSpinner): improve transition (#1946)

supachailllpay · marcosmoura · commit 0e62ae799670 · 2019-05-12T02:06:47.000+02:00
* Fix MdProgressSpinner transition

* Use CSS transition duration instead of explicit variable

* Add missing watcher for mdValue and mdStroke
diff --git a/src/components/MdProgress/MdProgressSpinner/MdProgressSpinner.vue b/src/components/MdProgress/MdProgressSpinner/MdProgressSpinner.vue
@@ -96,9 +96,15 @@
       }
     },
     watch: {
+      mdValue () {
+        this.attachCircleStyle()
+      },
       mdDiameter () {
         this.attachSvgStyle()
         this.attachCircleStyle()
+      },
+      mdStroke () {
+        this.attachCircleStyle()
       }
     },
     methods: {
@@ -169,7 +175,7 @@
       transform: rotate(4680deg)
     }
   }
-  
+
   @keyframes md-progress-spinner-stroke-rotate {
     0% {
       stroke-dashoffset: var(--md-progress-spinner-start-value);
@@ -260,31 +266,42 @@
       animation: md-progress-spinner-rotate 2s linear infinite;
 
       &.md-progress-spinner-enter,
-      &.md-progress-spinner-leave-active {
-        transition-duration: .4s;
-
+      &.md-progress-spinner-leave-to {
         .md-progress-spinner-draw {
           opacity: 0;
           transform: scale(.1);
         }
       }
 
+      &.md-progress-spinner-enter-active,
+      &.md-progress-spinner-leave-active {
+        transition-duration: .4s;
+        animation: none;
+      }
+
       .md-progress-spinner-circle {
         animation: 4s infinite $md-transition-stand-timing;
         animation-name: md-progress-spinner-stroke-rotate;
       }
     }
 
     &.md-determinate {
-      &.md-progress-spinner-enter-active,
-      &.md-progress-spinner-leave-active {
+      &.md-progress-spinner-enter-active {
         transition-duration: 2s;
 
         .md-progress-spinner-draw {
           animation: md-progress-spinner-initial-rotate 1.98s $md-transition-stand-timing forwards;
         }
       }
 
+      &.md-progress-spinner-leave-active {
+        transition-duration: 2s;
+
+        .md-progress-spinner-draw {
+          animation: md-progress-spinner-initial-rotate reverse 1.98s $md-transition-stand-timing forwards;
+        }
+      }
+
       .md-progress-spinner-draw {
         transition: none;
       }
