Changes to animation router and included an interrupt flag.

zurb · Feb 24, 2015 · e8f58a2 · e8f58a2
1 parent e79a5c1
commit e8f58a2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/js/angular/services/foundation.dynamicRouting.animations.js b/js/angular/services/foundation.dynamicRouting.animations.js
@@ -19,13 +19,14 @@
     function link(scope, element) {
       var animation = {};
       var initiator = false;
+      var animationEnded = false;
       var presetHeight;
 
       var cleanup = [
         $rootScope.$on('$stateChangeStart', onStateChangeStart),
         $rootScope.$on('$stateChangeError', onStateChangeError),
         scope.$on('$stateChangeSuccess', onStateChangeSuccess),
-        scope.$on('$viewContentAnimationEnded', onViewContentAnimationEnded),
+        scope.$on('$viewContentAnimationEnded', onViewContentAnimationEnded)
       ];
 
       var destroyed = scope.$on('$destroy', function onDestroy() {
@@ -39,29 +40,28 @@
       });
 
       function onStateChangeStart(event, toState, toParams, fromState, fromParams) {
-        if ($state.includes(getState()) && animation.leave) {
-          element.addClass(animation.leave);
-        }
 
-        animationRouter(event, toState, fromState);
+        if (fromState.animation) {
+          animationRouter(event, toState, fromState);
+        }
 
       }
 
       function animationRouter(event, toState, fromState) {
-        if (fromState.animation) {
+        if (!animationEnded) {
+          resetParent();
+
+          element.removeClass(fromState.animation.leave);
+
           prepareParent();
 
-          if (fromState.animation.leave && !toState.animation.enter) {
-            // if there is already a state existing on the page
+        }
+        else {
+          prepareParent();
 
-            if (element.parent().children().length > 1) {
-              element.removeClass(fromState.animation.leave);
-            }
-          }
-          else {
-            prepareParent();
-          }
+          element.addClass(fromState.animation.leave);
         }
+
       }
 
       function onStateChangeError() {
@@ -82,7 +82,8 @@
         if (event.targetScope === scope && animation.enter) {
           element.removeClass(animation.enter);
         }
-        resetParent(); //reset parent if state change when animation is done
+
+        animationEnded = true;
       }
 
       function getState() {

diff --git a/tests/motion/templates/out-only.html b/tests/motion/templates/out-only.html
@@ -1,7 +1,7 @@
 ---
 name: out-only
 url: /out-only
-animationOut: slideInRight
+animationOut: slideOutRight
 ---
 
 <div style="background-color: #a4a02e; width: 100%;"></div>