Nice header title bar animations

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.
@@ -1663,7 +1663,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -1735,7 +1735,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" */
@@ -1750,7 +1750,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; }
@@ -2034,7 +2034,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; }
@@ -2292,13 +2292,13 @@ a.button {
   -webkit-transform: translate3d(-120px, 0, 0);
   opacity: 0; }
 
-.slide-left-fade-remove {
+.slide-in-left-fade-add {
   -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
   -webkit-transform: translate3d(120px, 0, 0);
   opacity: 0; }
 
-.slide-left-fade-remove-active {
+.slide-in-left-fade-add-active {
-  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0px, 0, 0);
   opacity: 1; }
 
 @-webkit-keyframes fadeOut {
@@ -2392,9 +2392,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -2407,9 +2407,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 

dist/css/ionic-scoped.css

@@ -1195,7 +1195,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 */
@@ -2487,7 +2487,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] {
@@ -2536,7 +2536,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%;
@@ -2549,7 +2549,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 {
@@ -2900,7 +2900,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; }
@@ -3111,12 +3111,12 @@
   .ionic .slide-left-fade-add-active {
     -webkit-transform: translate3d(-120px, 0, 0);
     opacity: 0; }
-  .ionic .slide-left-fade-remove {
+  .ionic .slide-in-left-fade-add {
     -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
     -webkit-transform: translate3d(120px, 0, 0);
     opacity: 0; }
-  .ionic .slide-left-fade-remove-active {
+  .ionic .slide-in-left-fade-add-active {
-    -webkit-transform: translate3d(0, 0, 0);
+    -webkit-transform: translate3d(0px, 0, 0);
     opacity: 1; }
   .ionic .fade-in {
     -webkit-animation: fadeOut 0.3s;
@@ -3166,9 +3166,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin .75s linear infinite;
+    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin .75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
-    animation: spin .75s linear infinite; }
+    animation: spin 0.75s linear infinite; }
     .ionic .icon-loading:before {
       content: "\e144"; }
   .ionic .icon-refreshing {
@@ -3180,9 +3180,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin .75s linear infinite;
+    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin .75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
-    animation: spin .75s linear infinite; }
+    animation: spin 0.75s linear infinite; }
     .ionic .icon-refreshing:before {
       content: "\e144"; }
   .ionic .hidden,

dist/css/ionic.css

@@ -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.
@@ -3066,7 +3066,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -3121,7 +3121,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 {
@@ -3136,7 +3136,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); }
 
@@ -3515,7 +3515,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; }
@@ -3878,13 +3878,13 @@ a.button {
   -webkit-transform: translate3d(-120px, 0, 0);
   opacity: 0; }
 
-.slide-left-fade-remove {
+.slide-in-left-fade-add {
   -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
   -webkit-transform: translate3d(120px, 0, 0);
   opacity: 0; }
 
-.slide-left-fade-remove-active {
+.slide-in-left-fade-add-active {
-  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0px, 0, 0);
   opacity: 1; }
 
 @-webkit-keyframes fadeOut {
@@ -3978,9 +3978,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -3993,9 +3993,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 

dist/js/ionic-angular.js

@@ -593,7 +593,21 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
       // Compile the template with the new scrope, and append it to the navigation's content area
       var el = $compile(templateString)(childScope, function(cloned, scope) {
         var content = $element[0].querySelector('.content');
-        angular.element(content).append(cloned);
+        var title = $element.parent().parent().parent()[0].querySelector('.title');
+        var newTitle = angular.element(title.cloneNode());
+
+        $compile(newTitle)(childScope);
+
+        title.parentNode.insertBefore(newTitle[0], title.nextSibling);
+
+        console.log(newTitle);
+        $animate.enter(cloned, angular.element(content));
+        $animate.addClass(angular.element(newTitle), 'slide-in-left-fade', function() {
+          $animate.removeClass(angular.element(newTitle), 'slide-in-left-fade', function() {
+            newTitle.scope().$destroy();
+            newTitle.remove();
+          });
+        });
       });
     });
   };

js/ext/angular/src/directive/ionicNav.js

@@ -48,7 +48,21 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
       // Compile the template with the new scrope, and append it to the navigation's content area
       var el = $compile(templateString)(childScope, function(cloned, scope) {
         var content = $element[0].querySelector('.content');
-        angular.element(content).append(cloned);
+        var title = $element.parent().parent().parent()[0].querySelector('.title');
+        var newTitle = angular.element(title.cloneNode());
+
+        $compile(newTitle)(childScope);
+
+        title.parentNode.insertBefore(newTitle[0], title.nextSibling);
+
+        console.log(newTitle);
+        $animate.enter(cloned, angular.element(content));
+        $animate.addClass(angular.element(newTitle), 'slide-in-left-fade', function() {
+          $animate.removeClass(angular.element(newTitle), 'slide-in-left-fade', function() {
+            newTitle.scope().$destroy();
+            newTitle.remove();
+          });
+        });
       });
     });
   };

scss/ionic/_animations.scss

@@ -96,15 +96,24 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
   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(120px, 0, 0);
   opacity: 0;
 }
-.slide-left-fade-remove-active {
+.slide-in-left-fade-add-active {
   //margin-left: -80px;
-  -webkit-transform: translate3d(0, 0, 0);
+  -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; }