From ac22184ecd74fcde9857b7aa36c6fbfbc5e647bd Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Thu, 28 Nov 2013 19:35:40 -0600
Subject: [PATCH] android animation fixes

---
 dist/css/ionic.css                            | 33 +++++++---
 dist/js/ionic-angular.js                      | 16 +++--
 examples/starters/list/index.html             | 11 +++-
 .../angular/src/directive/ionicNavRouter.js   | 16 +++--
 scss/_animations.scss                         | 65 +++++++++++++------
 5 files changed, 97 insertions(+), 44 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 8f7254e573..def70023fb 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -5155,45 +5155,61 @@ a.button {
   bottom: 0;
   left: 0; }
 
-.slide-left-right > .ng-enter, .slide-left-right.ng-enter, .slide-left-right > .ng-leave, .slide-left-right.ng-leave {
-  -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
-  -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
-  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+.ng-animate .pane {
+  position: absolute; }
+
+/**
+ * Slide Left-Right
+ * --------------------------------------------------
+ * NEW content slides IN from the RIGHT, OLD slides OUT to the LEFT
+ * Reverse: NEW content slides IN from the LEFT, OLD slides OUT to the RIGHT
+ */
+.slide-left-right > .ng-enter, .slide-left-right.ng-enter,
+.slide-left-right > .ng-leave, .slide-left-right.ng-leave {
+  -webkit-transition: all ease-in-out 250ms;
+  -moz-transition: all ease-in-out 250ms;
+  transition: all ease-in-out 250ms;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0; }
 .slide-left-right > .ng-enter, .slide-left-right.ng-enter {
+  /* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
   -webkit-transform: translate3d(100%, 0, 0);
   -moz-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0); }
 .slide-left-right > .ng-enter.ng-enter-active, .slide-left-right.ng-enter.ng-enter-active {
+  /* NEW content ACTIVELY sliding IN from the RIGHT */
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 .slide-left-right > .ng-leave.ng-leave-active, .slide-left-right.ng-leave.ng-leave-active {
+  /* OLD content ACTIVELY sliding OUT to the LEFT */
   -webkit-transform: translate3d(-100%, 0, 0);
   -moz-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0); }
 .slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter, .slide-left-right.reverse > .ng-leave, .slide-left-right.reverse.ng-leave {
-  -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
-  -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
-  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+  -webkit-transition: all ease-in-out 250ms;
+  -moz-transition: all ease-in-out 250ms;
+  transition: all ease-in-out 250ms;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0; }
 .slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter {
+  /* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
   -webkit-transform: translate3d(-100%, 0, 0);
   -moz-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0); }
 .slide-left-right.reverse > .ng-enter.ng-enter-active, .slide-left-right.reverse.ng-enter.ng-enter-active {
+  /* NEW content ACTIVELY sliding IN from the LEFT */
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 .slide-left-right.reverse > .ng-leave.ng-leave-active, .slide-left-right.reverse.ng-leave.ng-leave-active {
+  /* OLD content ACTIVELY sliding OUT to the RIGHT */
   -webkit-transform: translate3d(100%, 0, 0);
   -moz-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0); }
@@ -5546,7 +5562,8 @@ a.button {
 /**
  * Some component specific animations
  */
-.nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter, .nav-title-slide-ios7 > .ng-leave, .nav-title-slide-ios7.ng-leave {
+.nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter,
+.nav-title-slide-ios7 > .ng-leave, .nav-title-slide-ios7.ng-leave {
   -webkit-transition: all 350ms;
   -moz-transition: all 350ms;
   transition: all 350ms;
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 7ff7a7b137..75ece102a4 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -1416,9 +1416,11 @@ angular.module('ionic.ui.navRouter', ['ionic.service.gesture'])
     }],
 
     link: function($scope, $element, $attr) {
+      if(!$element.length) return;
+      
       $scope.animation = $attr.animation;
 
-      $element.addClass('noop-animation');
+      $element[0].classList.add('noop-animation');
 
       var isFirst = true;
       // Store whether we did an animation yet, to know if
@@ -1430,15 +1432,15 @@ angular.module('ionic.ui.navRouter', ['ionic.service.gesture'])
       };
 
       var reverseTransition = function() {
-        $element.removeClass('noop-animation');
-        $element.addClass($scope.animation);
-        $element.addClass('reverse');
+        $element[0].classList.remove('noop-animation');
+        $element[0].classList.add($scope.animation);
+        $element[0].classList.add('reverse');
       };
 
       var forwardTransition = function() {
-        $element.removeClass('noop-animation');
-        $element.removeClass('reverse');
-        $element.addClass($scope.animation);
+        $element[0].classList.remove('noop-animation');
+        $element[0].classList.remove('reverse');
+        $element[0].classList.add($scope.animation);
       };
 
       $scope.$on('$routeChangeSuccess', function(e, a) {
diff --git a/examples/starters/list/index.html b/examples/starters/list/index.html
index 82c992af85..07d5ea30bb 100644
--- a/examples/starters/list/index.html
+++ b/examples/starters/list/index.html
@@ -5,8 +5,13 @@
     <title>Ionic List Example</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 
-    <!-- ionic css -->
-    <link href="/dist/css/ionic.css" rel="stylesheet">
+    <link id="css" rel="stylesheet">
+    <script>
+      document.getElementById("css").href = "/dist/css/ionic.css?r=" + Math.random();
+    </script>
+
+    <!-- ionic css 
+    <link href="/dist/css/ionic.css" rel="stylesheet">-->
 
     <!-- ionic/angularjs scripts -->
     <script src="/dist/js/ionic.js"></script>
@@ -28,7 +33,7 @@
     'nav-router' attribute updates the nav-bar title and animations as you navigate
     'animation' attribute sets which type of animations to use
   -->
-  <body ng-app="listExample" nav-router animation="slide-left-right-ios7">
+  <body ng-app="listExample" nav-router animation="slide-left-right">
 
     <!-- The nav bar that will be updated as we navigate -->
     <nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
diff --git a/js/ext/angular/src/directive/ionicNavRouter.js b/js/ext/angular/src/directive/ionicNavRouter.js
index e6220ad7f5..6fa4fd1fd8 100644
--- a/js/ext/angular/src/directive/ionicNavRouter.js
+++ b/js/ext/angular/src/directive/ionicNavRouter.js
@@ -41,9 +41,11 @@ angular.module('ionic.ui.navRouter', ['ionic.service.gesture'])
     }],
 
     link: function($scope, $element, $attr) {
+      if(!$element.length) return;
+      
       $scope.animation = $attr.animation;
 
-      $element.addClass('noop-animation');
+      $element[0].classList.add('noop-animation');
 
       var isFirst = true;
       // Store whether we did an animation yet, to know if
@@ -55,15 +57,15 @@ angular.module('ionic.ui.navRouter', ['ionic.service.gesture'])
       };
 
       var reverseTransition = function() {
-        $element.removeClass('noop-animation');
-        $element.addClass($scope.animation);
-        $element.addClass('reverse');
+        $element[0].classList.remove('noop-animation');
+        $element[0].classList.add($scope.animation);
+        $element[0].classList.add('reverse');
       };
 
       var forwardTransition = function() {
-        $element.removeClass('noop-animation');
-        $element.removeClass('reverse');
-        $element.addClass($scope.animation);
+        $element[0].classList.remove('noop-animation');
+        $element[0].classList.remove('reverse');
+        $element[0].classList.add($scope.animation);
       };
 
       $scope.$on('$routeChangeSuccess', function(e, a) {
diff --git a/scss/_animations.scss b/scss/_animations.scss
index c51daf1625..386415a172 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -12,50 +12,76 @@ $transition-time: 250ms;
 .noop-animation {
   > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
     @include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-time);
-    position:absolute;
-    top:0;
-    right:0;
-    bottom:0;
-    left:0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
   }
 }
 
+
+// required for Android
+.ng-animate .pane {
+  position: absolute;
+}
+
+
+/**
+ * Slide Left-Right
+ * --------------------------------------------------
+ * NEW content slides IN from the RIGHT, OLD slides OUT to the LEFT
+ * Reverse: NEW content slides IN from the LEFT, OLD slides OUT to the RIGHT
+ */
+
 .slide-left-right {
-  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
-    @include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-time);
-    position:absolute;
-    top:0;
-    right:0;
-    bottom:0;
-    left:0;
+  > .ng-enter, &.ng-enter, 
+  > .ng-leave, &.ng-leave {
+    @include transition(all ease-in-out $transition-time);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
   }
   > .ng-enter, &.ng-enter {
+    /* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
     @include translate3d(100%, 0, 0);
   }
   > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+    /* NEW content ACTIVELY sliding IN from the RIGHT */
     @include translate3d(0, 0, 0);
+    //.scroll { background: purple; } //for debugging
   }
   > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+    /* OLD content ACTIVELY sliding OUT to the LEFT */
     @include translate3d(-100%, 0, 0);
+    //.scroll { background: green; } //for debugging
   }
 
   &.reverse {
     > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
-      @include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-time);
-      position:absolute;
-      top:0;
-      right:0;
-      bottom:0;
-      left:0;
+      @include transition(all ease-in-out $transition-time);
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
     }
+
     > .ng-enter, &.ng-enter {
+      /* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
       @include translate3d(-100%, 0, 0);
     }
     > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+      /* NEW content ACTIVELY sliding IN from the LEFT */
       @include translate3d(0, 0, 0);
+      //.scroll { background: blue; } //for debugging
     }
     > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+      /* OLD content ACTIVELY sliding OUT to the RIGHT */
       @include translate3d(100%, 0, 0);
+      //.scroll { background: yellow; } //for debugging
     }
   }
 }
@@ -301,7 +327,8 @@ $transition-time: 250ms;
  */
 
 .nav-title-slide-ios7 {
-  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+  > .ng-enter, &.ng-enter, 
+  > .ng-leave, &.ng-leave {
     @include transition(all 350ms);
     @include transition-timing-function($ios7-timing-function);
     opacity: 1;