From 565b050003da9fb4f7fa876851def5ea97f2ea74 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 1 Nov 2013 15:47:04 -0500
Subject: [PATCH 1/7] Fixed nav controller scoping and isVisible

---
 dist/js/ionic-angular.js                 | 91 +++++++++++-------------
 js/ext/angular/src/directive/ionicNav.js | 91 +++++++++++-------------
 2 files changed, 86 insertions(+), 96 deletions(-)

diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 3a798ffed3..4bc247a16c 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -642,6 +642,31 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 })
 
 .directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) {
+
+  var animatePushedController = function(childScope, clone, $element) {
+    var title = angular.element($element.parent().parent().parent()[0].querySelector('.title'));
+    var newTitle = angular.element(title.clone());
+
+    $compile(newTitle)(childScope);
+    title.after(newTitle);
+
+    clone.addClass(childScope.slideAnimation);
+
+    $animate.addClass(newTitle, childScope.slideTitleAnimation, function() {
+      $animate.removeClass(newTitle, childScope.slideTitleAnimation, function() {
+        newTitle.scope().$destroy();
+        newTitle.remove();
+      });
+    });
+
+    var title = $element.parent().parent().parent()[0].querySelector('.title');
+    $animate.enter(clone, $element.parent(), $element);
+    $animate.addClass(angular.element(title), childScope.slideTitleAnimation, function() {
+      $animate.removeClass(angular.element(title), childScope.slideTitleAnimation, function() {
+      });
+    });
+  };
+
   return {
     restrict: 'ECA',
     require: '^navs',
@@ -650,6 +675,20 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
       return function($scope, $element, $attr, navCtrl) {
         var lastParent, lastIndex, childScope, childElement;
 
+
+        $scope.title = $attr.title;
+        $scope.slideAnimation = $attr.slideAnimation || '';
+        $scope.slideTitleAnimation = $attr.slideTitleAnimation || '';
+
+        if($attr.navBar === "false") {
+          navCtrl.hideNavBar();
+        } else {
+          navCtrl.showNavBar();
+        }
+
+        // Push this controller onto the stack
+        $scope.pushController($scope, $element);
+
         $scope.$watch('isVisible', function(value) {
           // Taken from ngIf
           if(childElement) {
@@ -661,58 +700,14 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
             childScope = undefined;
           }
 
+          // Check if this is visible, and if so, create it and show it
           if(value) {
-            childScope = $scope;
+            childScope = $scope.$new();
+
             transclude(childScope, function(clone) {
               childElement = clone;
 
-              childScope.title = $attr.title;
-              childScope.slideAnimation = $attr.slideAnimation || '';
-              childScope.slideTitleAnimation = $attr.slideTitleAnimation || '';
-
-              if($attr.navBar === "false") {
-                navCtrl.hideNavBar();
-              } else {
-                navCtrl.showNavBar();
-              }
-
-              childScope.pushController(childScope, $element);
-
-              var title = angular.element($element.parent().parent().parent()[0].querySelector('.title'));
-              var newTitle = angular.element(title.clone());
-
-              $compile(newTitle)(childScope);
-
-              title.after(newTitle);
-
-              console.log(newTitle);
-        
-              clone.addClass(childScope.slideAnimation);
-
-              $animate.addClass(newTitle, childScope.slideTitleAnimation, function() {
-                $animate.removeClass(newTitle, childScope.slideTitleAnimation, function() {
-                  newTitle.scope().$destroy();
-                  newTitle.remove();
-                });
-              });
-
-              /*
-              Gesture.on('drag', function(e) {
-                //navCtrl.handleDrag(e);
-                console.log('Content drag', e);
-              }, childElement[0]);
-
-              Gesture.on('release', function(e) {
-                //navCtrl._endDrag(e);
-              }, childElement[0]);
-              */
-
-              var title = $element.parent().parent().parent()[0].querySelector('.title');
-              $animate.enter(clone, $element.parent(), $element);
-              $animate.addClass(angular.element(title), childScope.slideTitleAnimation, function() {
-                $animate.removeClass(angular.element(title), childScope.slideTitleAnimation, function() {
-                });
-              });
+              animatePushedController(childScope, clone, $element);
             });
           } 
         });
diff --git a/js/ext/angular/src/directive/ionicNav.js b/js/ext/angular/src/directive/ionicNav.js
index 8b13cc26a4..5f231c996c 100644
--- a/js/ext/angular/src/directive/ionicNav.js
+++ b/js/ext/angular/src/directive/ionicNav.js
@@ -97,6 +97,31 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 })
 
 .directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) {
+
+  var animatePushedController = function(childScope, clone, $element) {
+    var title = angular.element($element.parent().parent().parent()[0].querySelector('.title'));
+    var newTitle = angular.element(title.clone());
+
+    $compile(newTitle)(childScope);
+    title.after(newTitle);
+
+    clone.addClass(childScope.slideAnimation);
+
+    $animate.addClass(newTitle, childScope.slideTitleAnimation, function() {
+      $animate.removeClass(newTitle, childScope.slideTitleAnimation, function() {
+        newTitle.scope().$destroy();
+        newTitle.remove();
+      });
+    });
+
+    var title = $element.parent().parent().parent()[0].querySelector('.title');
+    $animate.enter(clone, $element.parent(), $element);
+    $animate.addClass(angular.element(title), childScope.slideTitleAnimation, function() {
+      $animate.removeClass(angular.element(title), childScope.slideTitleAnimation, function() {
+      });
+    });
+  };
+
   return {
     restrict: 'ECA',
     require: '^navs',
@@ -105,6 +130,20 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
       return function($scope, $element, $attr, navCtrl) {
         var lastParent, lastIndex, childScope, childElement;
 
+
+        $scope.title = $attr.title;
+        $scope.slideAnimation = $attr.slideAnimation || '';
+        $scope.slideTitleAnimation = $attr.slideTitleAnimation || '';
+
+        if($attr.navBar === "false") {
+          navCtrl.hideNavBar();
+        } else {
+          navCtrl.showNavBar();
+        }
+
+        // Push this controller onto the stack
+        $scope.pushController($scope, $element);
+
         $scope.$watch('isVisible', function(value) {
           // Taken from ngIf
           if(childElement) {
@@ -116,58 +155,14 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
             childScope = undefined;
           }
 
+          // Check if this is visible, and if so, create it and show it
           if(value) {
-            childScope = $scope;
+            childScope = $scope.$new();
+
             transclude(childScope, function(clone) {
               childElement = clone;
 
-              childScope.title = $attr.title;
-              childScope.slideAnimation = $attr.slideAnimation || '';
-              childScope.slideTitleAnimation = $attr.slideTitleAnimation || '';
-
-              if($attr.navBar === "false") {
-                navCtrl.hideNavBar();
-              } else {
-                navCtrl.showNavBar();
-              }
-
-              childScope.pushController(childScope, $element);
-
-              var title = angular.element($element.parent().parent().parent()[0].querySelector('.title'));
-              var newTitle = angular.element(title.clone());
-
-              $compile(newTitle)(childScope);
-
-              title.after(newTitle);
-
-              console.log(newTitle);
-        
-              clone.addClass(childScope.slideAnimation);
-
-              $animate.addClass(newTitle, childScope.slideTitleAnimation, function() {
-                $animate.removeClass(newTitle, childScope.slideTitleAnimation, function() {
-                  newTitle.scope().$destroy();
-                  newTitle.remove();
-                });
-              });
-
-              /*
-              Gesture.on('drag', function(e) {
-                //navCtrl.handleDrag(e);
-                console.log('Content drag', e);
-              }, childElement[0]);
-
-              Gesture.on('release', function(e) {
-                //navCtrl._endDrag(e);
-              }, childElement[0]);
-              */
-
-              var title = $element.parent().parent().parent()[0].querySelector('.title');
-              $animate.enter(clone, $element.parent(), $element);
-              $animate.addClass(angular.element(title), childScope.slideTitleAnimation, function() {
-                $animate.removeClass(angular.element(title), childScope.slideTitleAnimation, function() {
-                });
-              });
+              animatePushedController(childScope, clone, $element);
             });
           } 
         });

From b91f0096e766f0f8f17554d49193694ccea317c7 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 1 Nov 2013 15:52:04 -0500
Subject: [PATCH 2/7] GITHUB!

---
 js/ext/angular/src/directive/ionicNav.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/js/ext/angular/src/directive/ionicNav.js b/js/ext/angular/src/directive/ionicNav.js
index 7a5b5f85f0..5f231c996c 100644
--- a/js/ext/angular/src/directive/ionicNav.js
+++ b/js/ext/angular/src/directive/ionicNav.js
@@ -40,6 +40,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
    */
   this.pushFromTemplate = function(templateUrl) {
     var childScope = $scope.$new();
+    childScope.isVisible = true;
 
     // Load the given template
     TemplateLoader.load(templateUrl).then(function(templateString) {
@@ -122,14 +123,13 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
   };
 
   return {
-    restrict: 'CA',
+    restrict: 'ECA',
     require: '^navs',
     transclude: 'element',
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr, navCtrl) {
         var lastParent, lastIndex, childScope, childElement;
 
-<<<<<<< HEAD
 
         $scope.title = $attr.title;
         $scope.slideAnimation = $attr.slideAnimation || '';
@@ -143,9 +143,6 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 
         // Push this controller onto the stack
         $scope.pushController($scope, $element);
-=======
-        $scope.isVisible = true;
->>>>>>> e8bd9a5dee77d29b746115546a51b1a4a3d46246
 
         $scope.$watch('isVisible', function(value) {
           // Taken from ngIf
@@ -161,10 +158,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
           // Check if this is visible, and if so, create it and show it
           if(value) {
             childScope = $scope.$new();
-<<<<<<< HEAD
 
-=======
->>>>>>> e8bd9a5dee77d29b746115546a51b1a4a3d46246
             transclude(childScope, function(clone) {
               childElement = clone;
 

From 40b5a83cb80e7e3fa27c035eba44bd007fd6aa38 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 1 Nov 2013 15:54:14 -0500
Subject: [PATCH 3/7] Other title slides in nicely

---
 dist/js/ionic-angular.js                 | 5 +++--
 js/ext/angular/src/directive/ionicNav.js | 5 +++--
 js/ext/angular/test/nav.html             | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 4bc247a16c..1abf9887fe 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -652,8 +652,8 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 
     clone.addClass(childScope.slideAnimation);
 
-    $animate.addClass(newTitle, childScope.slideTitleAnimation, function() {
-      $animate.removeClass(newTitle, childScope.slideTitleAnimation, function() {
+    $animate.addClass(newTitle, childScope.slideTitleInAnimation, function() {
+      $animate.removeClass(newTitle, childScope.slideTitleInAnimation, function() {
         newTitle.scope().$destroy();
         newTitle.remove();
       });
@@ -679,6 +679,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
         $scope.title = $attr.title;
         $scope.slideAnimation = $attr.slideAnimation || '';
         $scope.slideTitleAnimation = $attr.slideTitleAnimation || '';
+        $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || '';
 
         if($attr.navBar === "false") {
           navCtrl.hideNavBar();
diff --git a/js/ext/angular/src/directive/ionicNav.js b/js/ext/angular/src/directive/ionicNav.js
index 5f231c996c..6a2526b0aa 100644
--- a/js/ext/angular/src/directive/ionicNav.js
+++ b/js/ext/angular/src/directive/ionicNav.js
@@ -107,8 +107,8 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 
     clone.addClass(childScope.slideAnimation);
 
-    $animate.addClass(newTitle, childScope.slideTitleAnimation, function() {
-      $animate.removeClass(newTitle, childScope.slideTitleAnimation, function() {
+    $animate.addClass(newTitle, childScope.slideTitleInAnimation, function() {
+      $animate.removeClass(newTitle, childScope.slideTitleInAnimation, function() {
         newTitle.scope().$destroy();
         newTitle.remove();
       });
@@ -134,6 +134,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
         $scope.title = $attr.title;
         $scope.slideAnimation = $attr.slideAnimation || '';
         $scope.slideTitleAnimation = $attr.slideTitleAnimation || '';
+        $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || '';
 
         if($attr.navBar === "false") {
           navCtrl.hideNavBar();
diff --git a/js/ext/angular/test/nav.html b/js/ext/angular/test/nav.html
index 46b8d6679c..8e14cc408e 100644
--- a/js/ext/angular/test/nav.html
+++ b/js/ext/angular/test/nav.html
@@ -39,7 +39,7 @@
     </navs>
 
     <script id="page.html" type="text/ng-template">
-      <div title="Home" ng-controller="CatsCtrl" class="nav-content" slide-animation="slide-in-slide-out" slide-title-animation="slide-left-fade">
+      <div title="Home" ng-controller="CatsCtrl" class="nav-content" slide-animation="slide-in-slide-out" slide-title-animation="slide-left-fade" slide-title-in-animation="slide-in-left-fade">
         <h1></h1>
         <a href="#" class="button button-success" ng-click="goNext()">Next</a>
         <list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>

From 01f689e58f56b35302574f601790bcbea186affd Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 1 Nov 2013 18:33:13 -0500
Subject: [PATCH 4/7] Better animation naming and control system.

---
 dist/css/ionic-ios7.css                  |  80 ++----------
 dist/css/ionic-scoped.css                |  75 ++---------
 dist/css/ionic.css                       | 155 +++++++++++++----------
 dist/js/ionic-angular.js                 |  31 ++++-
 js/ext/angular/src/directive/ionicNav.js |  31 ++++-
 js/ext/angular/test/nav.html             |   2 +-
 scss/ionic/_animations.scss              |  93 --------------
 scss/ionic/animations/_bar_ios7.scss     | 111 ++++++++++++++++
 scss/ionic/ionic.scss                    |   2 +
 9 files changed, 270 insertions(+), 310 deletions(-)
 create mode 100644 scss/ionic/animations/_bar_ios7.scss

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index a29c1f8bc5..a9abfaba06 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -182,7 +182,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -1682,7 +1682,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -1754,7 +1754,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, .05s; }
+  transition-delay: 0s, 0.05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1769,7 +1769,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: .05s, 0s; }
+    transition-delay: 0.05s, 0s; }
 
 .item-radio {
   padding: 0; }
@@ -2054,7 +2054,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px #fff; }
+      text-shadow: 0px 0px 10px white; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -2265,64 +2265,6 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 
-.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter {
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(100%, 0, 0);
-  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0); }
-.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave {
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(0%, 0, 0); }
-.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active {
-  -webkit-transform: translate3d(-10%, 0, 0);
-  opacity: 0.8; }
-
-.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter {
-  z-index: 1;
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(-100%, 0, 0);
-  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0); }
-.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave {
-  z-index: 0;
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(0%, 0, 0); }
-.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active {
-  -webkit-transform: translate3d(10%, 0, 0);
-  opacity: 0.8; }
-
-/**
- * An animation that fades out one content area and fades in another
- */
-.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
-  opacity: 0;
-  -webkit-transition: opacity 0.3s ease-in-out; }
-.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
-  opacity: 1; }
-.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
-  opacity: 1;
-  -webkit-transition: opacity 0.3s ease-in-out; }
-.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
-  opacity: 0; }
-
-.slide-left-fade-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
-
-.slide-left-fade-add-active {
-  -webkit-transform: translate3d(-100%, 0, 0);
-  opacity: 0; }
-
-.slide-in-left-fade-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  -webkit-transform: translate3d(100%, 0, 0);
-  opacity: 0; }
-
-.slide-in-left-fade-add-active {
-  -webkit-transform: translate3d(0px, 0, 0);
-  opacity: 1; }
-
 @-webkit-keyframes fadeOut {
   from {
     opacity: 1; }
@@ -2453,9 +2395,9 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
-  animation: spin .75s linear infinite; }
+  -webkit-animation: spin 0.75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
+  animation: spin 0.75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -2468,9 +2410,9 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
-  animation: spin .75s linear infinite; }
+  -webkit-animation: spin 0.75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
+  animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 2fa3c3be26..96f77c643f 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -168,9 +168,6 @@
   /* the handle when the toggle is "on" */
   /* make sure list item content have enough padding on right to fit the toggle */
   /* position the toggle to the right within a list item */
-  /**
-   * An animation that fades out one content area and fades in another
-   */
   @-webkit-keyframes fadeOut {
     from {
       opacity: 1; }
@@ -213,7 +210,7 @@
       transform: rotate(360deg); } }
  }
   .ionic i, .ionic .icon {
-    font-family: 'ionicons' !important;
+    font-family: "ionicons" !important;
     speak: none !important;
     font-style: normal !important;
     font-weight: normal !important;
@@ -1195,7 +1192,7 @@
   .ionic fieldset {
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
-    border: 1px solid #c0c0c0; }
+    border: 1px solid silver; }
   .ionic legend {
     padding: 0;
     /* 2 */
@@ -2505,7 +2502,7 @@
   .ionic input[type="file"] {
     line-height: 34px; }
   .ionic select {
-    border: 1px solid #ccc;
+    border: 1px solid #cccccc;
     background-color: white; }
   .ionic select[multiple],
   .ionic select[size] {
@@ -2554,7 +2551,7 @@
       border-radius: 50%;
       background: white;
       content: ' ';
-      transition: background-color .1s ease-in-out; }
+      transition: background-color 0.1s ease-in-out; }
   .ionic .checkbox input:after {
     position: absolute;
     top: 34%;
@@ -2567,7 +2564,7 @@
     border-right: 0;
     content: ' ';
     opacity: 0;
-    transition: opacity .05s ease-in-out;
+    transition: opacity 0.05s ease-in-out;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg); }
   .ionic .checkbox input:checked:before {
@@ -2919,7 +2916,7 @@
       .ionic .button.button-icon:active, .ionic .button.button-icon.active {
         background: none;
         box-shadow: none;
-        text-shadow: 0px 0px 10px #fff; }
+        text-shadow: 0px 0px 10px white; }
     .ionic .button.block, .ionic .button.button-full {
       margin-top: 10px;
       margin-bottom: 10px; }
@@ -3092,54 +3089,6 @@
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0); }
-  .ionic .slide-in-slide-out.ng-enter, .ionic .slide-in-slide-out > .ng-enter {
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform: translate3d(100%, 0, 0);
-    box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-  .ionic .slide-in-slide-out.ng-enter-active, .ionic .slide-in-slide-out > .ng-enter-active {
-    -webkit-transform: translate3d(0, 0, 0); }
-  .ionic .slide-in-slide-out.ng-leave, .ionic .slide-in-slide-out > .ng-leave {
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform: translate3d(0%, 0, 0); }
-  .ionic .slide-in-slide-out.ng-leave-active, .ionic .slide-in-slide-out > .ng-leave-active {
-    -webkit-transform: translate3d(-10%, 0, 0);
-    opacity: 0.8; }
-  .ionic .slide-in-slide-out-reverse.ng-enter, .ionic .slide-in-slide-out-reverse > .ng-enter {
-    z-index: 1;
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-  .ionic .slide-in-slide-out-reverse.ng-enter-active, .ionic .slide-in-slide-out-reverse > .ng-enter-active {
-    -webkit-transform: translate3d(0, 0, 0); }
-  .ionic .slide-in-slide-out-reverse.ng-leave, .ionic .slide-in-slide-out-reverse > .ng-leave {
-    z-index: 0;
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform: translate3d(0%, 0, 0); }
-  .ionic .slide-in-slide-out-reverse.ng-leave-active, .ionic .slide-in-slide-out-reverse > .ng-leave-active {
-    -webkit-transform: translate3d(10%, 0, 0);
-    opacity: 0.8; }
-  .ionic .fade-in-out.ng-enter, .ionic .fade-in-out > .ng-enter {
-    opacity: 0;
-    -webkit-transition: opacity 0.3s ease-in-out; }
-  .ionic .fade-in-out.ng-enter-active, .ionic .fade-in-out > .ng-enter-active {
-    opacity: 1; }
-  .ionic .fade-in-out.ng-leave, .ionic .fade-in-out > .ng-leave {
-    opacity: 1;
-    -webkit-transition: opacity 0.3s ease-in-out; }
-  .ionic .fade-in-out.ng-leave-active, .ionic .fade-in-out > .ng-leave-active {
-    opacity: 0; }
-  .ionic .slide-left-fade-add {
-    -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
-  .ionic .slide-left-fade-add-active {
-    -webkit-transform: translate3d(-100%, 0, 0);
-    opacity: 0; }
-  .ionic .slide-in-left-fade-add {
-    -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-    -webkit-transform: translate3d(100%, 0, 0);
-    opacity: 0; }
-  .ionic .slide-in-left-fade-add-active {
-    -webkit-transform: translate3d(0px, 0, 0);
-    opacity: 1; }
   .ionic .fade-in {
     -webkit-animation: fadeOut 0.3s;
     animation: fadeOut 0.3s; }
@@ -3214,9 +3163,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin .75s linear infinite;
-    -moz-animation: spin .75s linear infinite;
-    animation: spin .75s linear infinite; }
+    -webkit-animation: spin 0.75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
+    animation: spin 0.75s linear infinite; }
     .ionic .icon-loading:before {
       content: "\e144"; }
   .ionic .icon-refreshing {
@@ -3228,9 +3177,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin .75s linear infinite;
-    -moz-animation: spin .75s linear infinite;
-    animation: spin .75s linear infinite; }
+    -webkit-animation: spin 0.75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
+    animation: spin 0.75s linear infinite; }
     .ionic .icon-refreshing:before {
       content: "\e144"; }
   .ionic .hidden,
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 85f7d260c1..fc147c573f 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -7,7 +7,7 @@
   font-style: normal; }
 
 i, .icon {
-  font-family: 'ionicons' !important;
+  font-family: "ionicons" !important;
   speak: none !important;
   font-style: normal !important;
   font-weight: normal !important;
@@ -1521,7 +1521,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -3085,7 +3085,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -3140,7 +3140,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color .1s ease-in-out; }
+    transition: background-color 0.1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -3155,7 +3155,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity .05s ease-in-out;
+  transition: opacity 0.05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -3535,7 +3535,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px #fff; }
+      text-shadow: 0px 0px 10px white; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -3851,64 +3851,6 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 
-.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter {
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(100%, 0, 0);
-  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0); }
-.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave {
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(0%, 0, 0); }
-.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active {
-  -webkit-transform: translate3d(-10%, 0, 0);
-  opacity: 0.8; }
-
-.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter {
-  z-index: 1;
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(-100%, 0, 0);
-  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
-.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0); }
-.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave {
-  z-index: 0;
-  -webkit-transition: 0.5s ease-in-out all;
-  -webkit-transform: translate3d(0%, 0, 0); }
-.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active {
-  -webkit-transform: translate3d(10%, 0, 0);
-  opacity: 0.8; }
-
-/**
- * An animation that fades out one content area and fades in another
- */
-.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
-  opacity: 0;
-  -webkit-transition: opacity 0.3s ease-in-out; }
-.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
-  opacity: 1; }
-.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
-  opacity: 1;
-  -webkit-transition: opacity 0.3s ease-in-out; }
-.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
-  opacity: 0; }
-
-.slide-left-fade-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
-
-.slide-left-fade-add-active {
-  -webkit-transform: translate3d(-100%, 0, 0);
-  opacity: 0; }
-
-.slide-in-left-fade-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  -webkit-transform: translate3d(100%, 0, 0);
-  opacity: 0; }
-
-.slide-in-left-fade-add-active {
-  -webkit-transform: translate3d(0px, 0, 0);
-  opacity: 1; }
-
 @-webkit-keyframes fadeOut {
   from {
     opacity: 1; }
@@ -3957,6 +3899,79 @@ a.button {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg); } }
 
+/** 
+ * Nav controllers and header bar animations
+ */
+.content-slide-in.ng-enter, .content-slide-in > .ng-enter {
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(100%, 0, 0);
+  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
+.content-slide-in.ng-enter-active, .content-slide-in > .ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.content-slide-in.ng-leave, .content-slide-in > .ng-leave {
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(0%, 0, 0); }
+.content-slide-in.ng-leave-active, .content-slide-in > .ng-leave-active {
+  -webkit-transform: translate3d(-10%, 0, 0);
+  opacity: 0.8; }
+
+.content-slide-out.ng-enter, .content-slide-out > .ng-enter {
+  z-index: 1;
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
+.content-slide-out.ng-enter-active, .content-slide-out > .ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.content-slide-out.ng-leave, .content-slide-out > .ng-leave {
+  z-index: 0;
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(0%, 0, 0); }
+.content-slide-out.ng-leave-active, .content-slide-out > .ng-leave-active {
+  -webkit-transform: translate3d(10%, 0, 0);
+  opacity: 0.8; }
+
+.bar-title-in-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  -webkit-transform: translate3d(100%, 0, 0);
+  opacity: 0; }
+
+.bar-title-in-add-active {
+  -webkit-transform: translate3d(0px, 0, 0);
+  opacity: 1; }
+
+.bar-title-out-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
+
+.bar-title-out-add-active {
+  -webkit-transform: translate3d(-100%, 0, 0);
+  opacity: 0; }
+
+.bar-button-in {
+  opacity: 0; }
+
+.bar-button-in-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  -webkit-transform: translate3d(50%, 0, 0);
+  opacity: 0; }
+
+.bar-button-in-active {
+  -webkit-transform: translate3d(0px, 0, 0);
+  opacity: 1; }
+
+/**
+ * Tab controller animations
+ */
+.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
+  opacity: 0;
+  -webkit-transition: opacity 0.3s ease-in-out; }
+.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
+  opacity: 1; }
+.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
+  opacity: 1;
+  -webkit-transition: opacity 0.3s ease-in-out; }
+.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
+  opacity: 0; }
+
 i.icon-default, .icon.icon-default {
   color: white; }
 
@@ -4039,9 +4054,9 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
-  animation: spin .75s linear infinite; }
+  -webkit-animation: spin 0.75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
+  animation: spin 0.75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -4054,9 +4069,9 @@ i.icon-gray-lighter, .icon.icon-gray-lighter {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
-  animation: spin .75s linear infinite; }
+  -webkit-animation: spin 0.75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
+  animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 1abf9887fe..665275db71 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -643,15 +643,29 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 
 .directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) {
 
+  // We need to animate the new controller into view.
   var animatePushedController = function(childScope, clone, $element) {
-    var title = angular.element($element.parent().parent().parent()[0].querySelector('.title'));
+    var parent = angular.element($element.parent().parent().parent());
+    
+    var title = angular.element(parent[0].querySelector('.title'));
+
+    // Clone the old title and insert it so we can animate it back into place for the new controller
     var newTitle = angular.element(title.clone());
 
     $compile(newTitle)(childScope);
     title.after(newTitle);
 
-    clone.addClass(childScope.slideAnimation);
+    // Grab the button so we can slide it in
+    var button = angular.element(parent[0].querySelector('.button'));
 
+    clone.addClass(childScope.slideInAnimation);
+
+    // Slide the button in
+    $animate.addClass(button, childScope.slideButtonInAnimation, function() {
+      $animate.removeClass(button, childScope.slideButtonInAnimation, function() {});
+    })
+
+    // Slide the new title in
     $animate.addClass(newTitle, childScope.slideTitleInAnimation, function() {
       $animate.removeClass(newTitle, childScope.slideTitleInAnimation, function() {
         newTitle.scope().$destroy();
@@ -659,10 +673,11 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
       });
     });
 
+    // Grab the old title and slide it out
     var title = $element.parent().parent().parent()[0].querySelector('.title');
     $animate.enter(clone, $element.parent(), $element);
-    $animate.addClass(angular.element(title), childScope.slideTitleAnimation, function() {
-      $animate.removeClass(angular.element(title), childScope.slideTitleAnimation, function() {
+    $animate.addClass(angular.element(title), childScope.slideTitleOutAnimation, function() {
+      $animate.removeClass(angular.element(title), childScope.slideTitleOutAnimation, function() {
       });
     });
   };
@@ -677,9 +692,11 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 
 
         $scope.title = $attr.title;
-        $scope.slideAnimation = $attr.slideAnimation || '';
-        $scope.slideTitleAnimation = $attr.slideTitleAnimation || '';
-        $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || '';
+        $scope.slideInAnimation = $attr.slideAnimation || 'content-slide-in';
+        $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || 'bar-title-in';
+        $scope.slideTitleOutAnimation = $attr.slideTitleOutAnimation || 'bar-title-out';
+        $scope.slideButtonInAnimation = $attr.slideButtonInAnimation || 'bar-button-in';
+        $scope.slideButtonOutAnimation = $attr.slideButtonOutAnimation || 'bar-button-out';
 
         if($attr.navBar === "false") {
           navCtrl.hideNavBar();
diff --git a/js/ext/angular/src/directive/ionicNav.js b/js/ext/angular/src/directive/ionicNav.js
index 6a2526b0aa..7938e60a0a 100644
--- a/js/ext/angular/src/directive/ionicNav.js
+++ b/js/ext/angular/src/directive/ionicNav.js
@@ -98,15 +98,29 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 
 .directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) {
 
+  // We need to animate the new controller into view.
   var animatePushedController = function(childScope, clone, $element) {
-    var title = angular.element($element.parent().parent().parent()[0].querySelector('.title'));
+    var parent = angular.element($element.parent().parent().parent());
+    
+    var title = angular.element(parent[0].querySelector('.title'));
+
+    // Clone the old title and insert it so we can animate it back into place for the new controller
     var newTitle = angular.element(title.clone());
 
     $compile(newTitle)(childScope);
     title.after(newTitle);
 
-    clone.addClass(childScope.slideAnimation);
+    // Grab the button so we can slide it in
+    var button = angular.element(parent[0].querySelector('.button'));
 
+    clone.addClass(childScope.slideInAnimation);
+
+    // Slide the button in
+    $animate.addClass(button, childScope.slideButtonInAnimation, function() {
+      $animate.removeClass(button, childScope.slideButtonInAnimation, function() {});
+    })
+
+    // Slide the new title in
     $animate.addClass(newTitle, childScope.slideTitleInAnimation, function() {
       $animate.removeClass(newTitle, childScope.slideTitleInAnimation, function() {
         newTitle.scope().$destroy();
@@ -114,10 +128,11 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
       });
     });
 
+    // Grab the old title and slide it out
     var title = $element.parent().parent().parent()[0].querySelector('.title');
     $animate.enter(clone, $element.parent(), $element);
-    $animate.addClass(angular.element(title), childScope.slideTitleAnimation, function() {
-      $animate.removeClass(angular.element(title), childScope.slideTitleAnimation, function() {
+    $animate.addClass(angular.element(title), childScope.slideTitleOutAnimation, function() {
+      $animate.removeClass(angular.element(title), childScope.slideTitleOutAnimation, function() {
       });
     });
   };
@@ -132,9 +147,11 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 
 
         $scope.title = $attr.title;
-        $scope.slideAnimation = $attr.slideAnimation || '';
-        $scope.slideTitleAnimation = $attr.slideTitleAnimation || '';
-        $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || '';
+        $scope.slideInAnimation = $attr.slideAnimation || 'content-slide-in';
+        $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || 'bar-title-in';
+        $scope.slideTitleOutAnimation = $attr.slideTitleOutAnimation || 'bar-title-out';
+        $scope.slideButtonInAnimation = $attr.slideButtonInAnimation || 'bar-button-in';
+        $scope.slideButtonOutAnimation = $attr.slideButtonOutAnimation || 'bar-button-out';
 
         if($attr.navBar === "false") {
           navCtrl.hideNavBar();
diff --git a/js/ext/angular/test/nav.html b/js/ext/angular/test/nav.html
index 8e14cc408e..23a933f219 100644
--- a/js/ext/angular/test/nav.html
+++ b/js/ext/angular/test/nav.html
@@ -39,7 +39,7 @@
     </navs>
 
     <script id="page.html" type="text/ng-template">
-      <div title="Home" ng-controller="CatsCtrl" class="nav-content" slide-animation="slide-in-slide-out" slide-title-animation="slide-left-fade" slide-title-in-animation="slide-in-left-fade">
+      <div title="Home" ng-controller="CatsCtrl" class="nav-content">
         <h1></h1>
         <a href="#" class="button button-success" ng-click="goNext()">Next</a>
         <list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>
diff --git a/scss/ionic/_animations.scss b/scss/ionic/_animations.scss
index 3fad6570e2..4adf22da37 100644
--- a/scss/ionic/_animations.scss
+++ b/scss/ionic/_animations.scss
@@ -22,99 +22,6 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
     transform: translate3d(0, 0, 0);
 }
 
-// A transition like the iOS nav controller where the old controller
-// slides out and the new one slides in. In this transition, the 
-// old controller slides out more slowly than the new one slides in.
-.slide-in-slide-out {
-  &.ng-enter, > .ng-enter {
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform:translate3d(100%,0,0) ;
-    box-shadow: -1px 0px 10px rgba(0,0,0,0.6);
-  }
-  &.ng-enter-active, > .ng-enter-active {
-    -webkit-transform:translate3d(0,0,0) ;
-  }
-  &.ng-leave, > .ng-leave {
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform:translate3d(0%,0,0);
-  }
-  &.ng-leave-active, > .ng-leave-active {
-    -webkit-transform:translate3d(-10%,0,0);
-    opacity: 0.8;
-  }
-}
-
-.slide-in-slide-out-reverse {
-  &.ng-enter, > .ng-enter {
-    z-index: 1;
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform:translate3d(-100%,0,0) ;
-    box-shadow: -1px 0px 10px rgba(0,0,0,0.6);
-  }
-  &.ng-enter-active, > .ng-enter-active {
-    -webkit-transform:translate3d(0,0,0) ;
-  }
-  &.ng-leave, > .ng-leave {
-    z-index: 0;
-    -webkit-transition: 0.5s ease-in-out all;
-    -webkit-transform:translate3d(0%,0,0);
-  }
-  &.ng-leave-active, > .ng-leave-active {
-    -webkit-transform:translate3d(10%,0,0);
-    opacity: 0.8;
-  }
-}
-
-/**
- * An animation that fades out one content area and fades in another
- */
-.fade-in-out {
-  &.ng-enter, > .ng-enter {
-    opacity: 0;
-    -webkit-transition: opacity 0.3s ease-in-out;
-  }
-  &.ng-enter-active, > .ng-enter-active {
-    opacity: 1;
-  }
-
-  &.ng-leave, > .ng-leave {
-    opacity: 1;
-    -webkit-transition: opacity 0.3s ease-in-out;
-  }
-
-  &.ng-leave-active, > .ng-leave-active {
-    opacity: 0;
-  }
-}
-
-.slide-left-fade-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-}
-.slide-left-fade-add-active {
-  //margin-left: -80px;
-  -webkit-transform: translate3d(-100%, 0, 0);
-  opacity: 0;
-}
-.slide-left-fade-remove {
-}
-.slide-left-fade-remove-active {
-}
-
-.slide-in-left-fade-add {
-  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-  -webkit-transform: translate3d(100%, 0, 0);
-  opacity: 0;
-}
-.slide-in-left-fade-add-active {
-  //margin-left: -80px;
-  -webkit-transform: translate3d(0px, 0, 0);
-  opacity: 1;
-}
-.slide-in-left-fade-remove {
-}
-.slide-in-left-fade-remove-active {
-}
-
 @-webkit-keyframes fadeOut {
   from { opacity: 1; }
   to { opacity: 0; }
diff --git a/scss/ionic/animations/_bar_ios7.scss b/scss/ionic/animations/_bar_ios7.scss
new file mode 100644
index 0000000000..a36cb1edfb
--- /dev/null
+++ b/scss/ionic/animations/_bar_ios7.scss
@@ -0,0 +1,111 @@
+/** 
+ * Nav controllers and header bar animations
+ */
+// A transition like the iOS nav controller where the old controller
+// slides out and the new one slides in. In this transition, the 
+// old controller slides out more slowly than the new one slides in.
+.content-slide-in {
+  &.ng-enter, > .ng-enter {
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform:translate3d(100%,0,0) ;
+    box-shadow: -1px 0px 10px rgba(0,0,0,0.6);
+  }
+  &.ng-enter-active, > .ng-enter-active {
+    -webkit-transform:translate3d(0,0,0) ;
+  }
+  &.ng-leave, > .ng-leave {
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform:translate3d(0%,0,0);
+  }
+  &.ng-leave-active, > .ng-leave-active {
+    -webkit-transform:translate3d(-10%,0,0);
+    opacity: 0.8;
+  }
+}
+
+.content-slide-out {
+  &.ng-enter, > .ng-enter {
+    z-index: 1;
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform:translate3d(-100%,0,0) ;
+    box-shadow: -1px 0px 10px rgba(0,0,0,0.6);
+  }
+  &.ng-enter-active, > .ng-enter-active {
+    -webkit-transform:translate3d(0,0,0) ;
+  }
+  &.ng-leave, > .ng-leave {
+    z-index: 0;
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform:translate3d(0%,0,0);
+  }
+  &.ng-leave-active, > .ng-leave-active {
+    -webkit-transform:translate3d(10%,0,0);
+    opacity: 0.8;
+  }
+}
+
+.bar-title-in-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  -webkit-transform: translate3d(100%, 0, 0);
+  opacity: 0;
+}
+.bar-title-in-add-active {
+  //margin-left: -80px;
+  -webkit-transform: translate3d(0px, 0, 0);
+  opacity: 1;
+}
+.bar-title-in-remove {
+}
+.bar-title-in-remove-active {
+}
+
+.bar-title-out-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+}
+.bar-title-out-add-active {
+  //margin-left: -80px;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+}
+.bar-title-out-remove {
+}
+.bar-title-out-remove-active {
+}
+
+.bar-button-in {
+  opacity: 0;
+}
+
+.bar-button-in-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  -webkit-transform: translate3d(50%, 0, 0);
+  opacity: 0;
+}
+.bar-button-in-active {
+  //margin-left: -80px;
+  -webkit-transform: translate3d(0px, 0, 0);
+  opacity: 1;
+}
+
+
+/**
+ * Tab controller animations
+ */
+.fade-in-out {
+  &.ng-enter, > .ng-enter {
+    opacity: 0;
+    -webkit-transition: opacity 0.3s ease-in-out;
+  }
+  &.ng-enter-active, > .ng-enter-active {
+    opacity: 1;
+  }
+
+  &.ng-leave, > .ng-leave {
+    opacity: 1;
+    -webkit-transition: opacity 0.3s ease-in-out;
+  }
+
+  &.ng-leave-active, > .ng-leave-active {
+    opacity: 0;
+  }
+}
diff --git a/scss/ionic/ionic.scss b/scss/ionic/ionic.scss
index 2de9cb3c44..e5db8ef8d9 100644
--- a/scss/ionic/ionic.scss
+++ b/scss/ionic/ionic.scss
@@ -52,6 +52,8 @@
   // Animations
   "animations",
 
+  "animations/bar_ios7",
+
   // Util
   "icons",
   "util",

From bebdb776df8536a06463d68ba969b7c531fb092b Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 1 Nov 2013 18:43:51 -0500
Subject: [PATCH 5/7] Tab stuff

---
 dist/js/ionic-angular.js                    | 14 ++++++--------
 js/ext/angular/src/directive/ionicTabBar.js | 14 ++++++--------
 js/ext/angular/test/tabs.html               |  2 +-
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 665275db71..29a856e710 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -1022,6 +1022,11 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
       return function($scope, $element, $attr, tabsCtrl) {
         var childScope, childElement;
 
+        $scope.title = $attr.title;
+        $scope.icon = $attr.icon;
+        $scope.iconOn = $attr.iconOn;
+        $scope.iconOff = $attr.iconOff;
+        tabsCtrl.add($scope);
         
         $scope.$watch('isVisible', function(value) {
           if(childElement) {
@@ -1041,13 +1046,6 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
             });
           }
         });
-
-        $scope.title = $attr.title;
-        $scope.icon = $attr.icon;
-        $scope.iconOn = $attr.iconOn;
-        $scope.iconOff = $attr.iconOff;
-        tabsCtrl.add($scope);
-
       }
     }
   };
@@ -1061,7 +1059,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     transclude: true,
     replace: true,
     scope: true,
-    template: '<div class="tabs tabs-primary">' + 
+    template: '<div class="tabs tabs-icon-top tabs-primary">' + 
       '<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' + 
     '</div>'
   };
diff --git a/js/ext/angular/src/directive/ionicTabBar.js b/js/ext/angular/src/directive/ionicTabBar.js
index 1b8dfbd59c..a45c6a0614 100644
--- a/js/ext/angular/src/directive/ionicTabBar.js
+++ b/js/ext/angular/src/directive/ionicTabBar.js
@@ -80,6 +80,11 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
       return function($scope, $element, $attr, tabsCtrl) {
         var childScope, childElement;
 
+        $scope.title = $attr.title;
+        $scope.icon = $attr.icon;
+        $scope.iconOn = $attr.iconOn;
+        $scope.iconOff = $attr.iconOff;
+        tabsCtrl.add($scope);
         
         $scope.$watch('isVisible', function(value) {
           if(childElement) {
@@ -99,13 +104,6 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
             });
           }
         });
-
-        $scope.title = $attr.title;
-        $scope.icon = $attr.icon;
-        $scope.iconOn = $attr.iconOn;
-        $scope.iconOff = $attr.iconOff;
-        tabsCtrl.add($scope);
-
       }
     }
   };
@@ -119,7 +117,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     transclude: true,
     replace: true,
     scope: true,
-    template: '<div class="tabs tabs-primary">' + 
+    template: '<div class="tabs tabs-icon-top tabs-primary">' + 
       '<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' + 
     '</div>'
   };
diff --git a/js/ext/angular/test/tabs.html b/js/ext/angular/test/tabs.html
index b25239cf96..c35da23574 100644
--- a/js/ext/angular/test/tabs.html
+++ b/js/ext/angular/test/tabs.html
@@ -74,7 +74,7 @@
         </content>
       </tab>
 
-      <tab title="About" icon="icon-ios7-clock" icon-off="icon-ios7-clock-outline">
+      <tab title="About" icon-on="icon-ios7-clock" icon-off="icon-ios7-clock-outline">
         <header class="bar bar-header bar-secondary">
           <h1 class="title">Deadlines</h1>
         </header>

From c23e29e09566c8e55da59d1b27c12fb374855484 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Sun, 3 Nov 2013 00:28:06 -0500
Subject: [PATCH 6/7] Fixed toderp app

---
 example/toderp2/index.html | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/example/toderp2/index.html b/example/toderp2/index.html
index 52b8b1c23e..0d40e1faf2 100644
--- a/example/toderp2/index.html
+++ b/example/toderp2/index.html
@@ -9,11 +9,11 @@
     <link rel="stylesheet" href="../../dist/css/ionic.css">
     <link rel="stylesheet" href="css/app.css">
     
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-mocks.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-route.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-mocks.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-route.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
 
     <script src='https://cdn.firebase.com/v0/firebase.js'></script>
     <script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
@@ -32,9 +32,10 @@
   <body>
 
     <!-- The root view controller -->
-    <nav-ctrl ng-controller="TodoCtrl">
+    <navs ng-controller="TodoCtrl">
       <nav-bar></nav-bar>
-    </nav-ctrl>
+      <content has-header="true"></content>
+    </navs>
 
     <!-- Splash -->
     <script id="splash.html" type="text/ng-template">

From b74f07229283a7278dd921729da7bbaafd6b7706 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Sun, 3 Nov 2013 00:41:08 -0500
Subject: [PATCH 7/7] Fixed weather example

---
 starters/weather/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/starters/weather/index.html b/starters/weather/index.html
index 8c21ab21be..552b4265fa 100644
--- a/starters/weather/index.html
+++ b/starters/weather/index.html
@@ -47,7 +47,7 @@
     var bgImage = document.getElementById('bg-image');
     var header = document.getElementById('header');
 
-    var scroll = new ionic.views.ScrollView({
+    var scroll = new ionic.views.Scroll({
       el: s,
       decelerationRate: 0.87,
       inertialEventInterval: 100