animation no longer occurs on directive load

QutEcoacoustics · Jul 18, 2014 · 8dd679e · 8dd679e
1 parent 40f1d88
commit 8dd679e
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/src/app/home/home.tpl.html b/src/app/home/home.tpl.html
@@ -44,7 +44,7 @@ <h3>Experiments</h3>
 
     <h3>Download annotations</h3>
     <label>
-        <input type="checkbox" ng-model="checked" > test binding is {{checked}}
+        <input type="checkbox" ng-model="checked" checked="true" > test binding is {{checked}}
     </label>
     <label>
         <input type="checkbox" ng-model="disabled" > is disabled {{disabled}}

diff --git a/src/components/directives/baw-toggle/_bawToggle.scss b/src/components/directives/baw-toggle/_bawToggle.scss
@@ -53,11 +53,11 @@ toggle-switch {
     margin: 0;
     height: $toggle-switch-height;
     overflow: hidden;
-    @include toggle-transition(border-color);
+
 
     &.on {
       border-color: $btn-success-border;
-      @include toggle-transition(border-color);
+
     }
 
     .toggle-switch-knob, .toggle-switch-on, .toggle-switch-off, .toggle-switch-status {
@@ -107,12 +107,10 @@ toggle-switch {
       &.on .toggle-switch-status-led {
         background-color: $on-color-indicator;
         @include vendor-prefix(box-shadow, 0 0 5px $brand-success);
-        @include toggle-transition(box-shadow, background-color);
       }
 
       &.off .toggle-switch-status-led {
         background-color: $off-color-indicator;
-        @include toggle-transition(box-shadow, background-color);
       }
 
     }
@@ -140,11 +138,9 @@ toggle-switch {
 
       & > div.off {
         @include vendor-prefix(transform, translateX(calc(-50% - 1px)));
-        @include toggle-transition(transform);
       }
 
       & > div.on {
-        @include toggle-transition(transform);
       }
 
       .toggle-switch-knob {
@@ -174,4 +170,32 @@ toggle-switch {
   & .active {
   }
 
+  // only animate when necessary
+  &.toggle-switch-animate {
+    .toggle-switch-wrapper {
+      @include toggle-transition(border-color);
+
+      &.on {
+        @include toggle-transition(border-color);
+      }
+
+      & .toggle-switch-status {
+        &.on .toggle-switch-status-led {
+          @include toggle-transition(box-shadow, background-color);
+        }
+        &.off .toggle-switch-status-led {
+          @include toggle-transition(box-shadow, background-color);
+        }
+      }
+
+      &[mode='slide-toggle'] {
+        & > div.off {
+          @include toggle-transition(transform);
+        }
+        & > div.on {
+          @include toggle-transition(transform);
+        }
+      }
+    }
+  }
 }
diff --git a/src/components/directives/baw-toggle/bawToggle.js b/src/components/directives/baw-toggle/bawToggle.js
@@ -11,7 +11,7 @@ angular.module("bawApp.directives.toggleSwitch", ["ng"])
             }
         };
     })
-    .directive("toggleSwitch", function () {
+    .directive("toggleSwitch", ["$timeout", function (timer) {
 
         return {
             restrict: "E",
@@ -73,6 +73,11 @@ angular.module("bawApp.directives.toggleSwitch", ["ng"])
                 if (knobDiv.innerText === "") {
                     knobDiv.innerText = " ";
                 }
+
+                // after load enable animations
+                timer(function() {
+                    element.classList.add("toggle-switch-animate");
+                }, 0);
             },
             controller: function($scope, $element, $attrs) {
 
@@ -88,4 +93,4 @@ angular.module("bawApp.directives.toggleSwitch", ["ng"])
                 };
             }
         };
-    });
+    }]);