feat: add simple animation to mark as done button

Author: johannesjo

app-src/scripts/task-list/_task-list-d.scss

@@ -451,3 +451,29 @@ $task-inner-padding-left-right: 6px;
     }
   }
 }
+
+.mark-as-done-btn {
+  ng-md-icon {
+    svg {
+      animation: 0.2s success-btn-ani linear;
+
+      [ui-view].ng-enter-active &,
+      [ui-view].ng-leave &,
+      [ui-view].ng-enter & {
+        animation-duration: 0s !important;
+      }
+    }
+  }
+}
+
+@keyframes success-btn-ani {
+  0% {
+    transform: scale(0) rotate(0deg);
+  }
+  50% {
+    transform: scale(1.2) rotate(180deg);
+  }
+  100% {
+    transform: scale(1) rotate(360deg);
+  }
+}

app-src/scripts/task-list/task-list-d.html

@@ -117,13 +117,10 @@
                         aria-label="delete"></ng-md-icon>
           </md-button>
           <md-button ng-click="task.isDone= !task.isDone; $ctrl.onTaskDoneChanged(task)"
-                     class="md-icon-button"
+                     class="md-icon-button mark-as-done-btn"
                      tabindex="2"
                      aria-label="un-/mark as done">
-            <ng-md-icon icon="check"
-                        ng-show="!task.isDone"></ng-md-icon>
-            <ng-md-icon icon="undo"
-                        ng-show="task.isDone"></ng-md-icon>
+            <ng-md-icon icon="{{(task.isDone?'undo':'check')}}"></ng-md-icon>
           </md-button>
         </div>
       </div>