From 02ba372eb840b4bb03bed6ba6ce8c92c9019091e Mon Sep 17 00:00:00 2001
From: Max Lynch <ihasmax@gmail.com>
Date: Sat, 23 Aug 2014 13:11:04 -0500
Subject: [PATCH 1/5] New transition styles

---
 js/angular/service/platform.js |   7 +-
 scss/_animations.scss          | 186 +++++++++++++++++++++++++++------
 scss/_scaffolding.scss         |   9 ++
 test/html/nav.html             |   2 -
 4 files changed, 166 insertions(+), 38 deletions(-)

diff --git a/js/angular/service/platform.js b/js/angular/service/platform.js
index 7dcfe87a0eb..de5a3899cd6 100644
--- a/js/angular/service/platform.js
+++ b/js/angular/service/platform.js
@@ -14,12 +14,13 @@ IonicModule
 .constant('$ionicPlatformDefaults', {
   'ios': {
     '$ionicNavBarConfig': {
-      transition: 'nav-title-slide-ios7',
+      transition: 'nav-title-slide-full',//nav-title-slide-ios7',
       alignTitle: 'center',
       backButtonIcon: 'ion-ios7-arrow-back'
     },
     '$ionicNavViewConfig': {
-      transition: 'slide-left-right-ios7'
+      //transition: 'slide-left-right-ios'
+      transition: 'full-slide'
     },
     '$ionicTabsConfig': {
       type: '',
@@ -33,7 +34,7 @@ IonicModule
       backButtonIcon: 'ion-ios7-arrow-back'
     },
     '$ionicNavViewConfig': {
-      transition: 'slide-left-right-ios7'
+      transition: 'slide-ios'
     },
     '$ionicTabsConfig': {
       type: 'tabs-striped',
diff --git a/scss/_animations.scss b/scss/_animations.scss
index c1643882713..5f0fa3bd528 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -329,19 +329,23 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
 
 
 /**
- * iOS7 style slide left to right
+ * iOS style slide left to right
  * --------------------------------------------------
  */
-$ios7-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
-$ios7-transition-duration: 340ms;
+$ios-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
+$ios-transition-duration: 6340ms;
+$ios-transition-box-shadow: 0px 0px 12px rgba(0,0,0,0.5);
+/*
 $ios-transition-box-shadow-start: -200px 0px 200px rgba(0,0,0,0), -5px 0px 5px rgba(0,0,0,0.01);
 $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px rgba(0,0,0,0.18);
+*/
 
+.slide-ios,
 .slide-left-right-ios7,
 .slide-right-left-ios7.reverse {
   > .ng-enter, &.ng-enter,
   > .ng-leave, &.ng-leave {
-    @include transition(all $ios7-timing-function $ios7-transition-duration);
+    @include transition(all $ios-timing-function $ios-transition-duration);
     position: absolute;
     top: 0;
     right: -1px;
@@ -368,13 +372,14 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
   }
   > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
     /* OLD content ACTIVELY sliding OUT to the LEFT */
-    @include translate3d(-15%, 0, 0);
+    @include translate3d(-20%, 0, 0);
   }
 }
+.slide-ios.reverse,
 .slide-left-right-ios7.reverse,
 .slide-right-left-ios7 {
   > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
-    @include transition(all $ios7-timing-function $ios7-transition-duration);
+    @include transition(all $ios-timing-function $ios-transition-duration);
     position: absolute;
     top: 0;
     right: -1px;
@@ -386,7 +391,7 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
   }
   > .ng-enter, &.ng-enter {
     /* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
-    @include translate3d(-15%, 0, 0);
+    @include translate3d(-20%, 0, 0);
   }
   > .ng-leave, &.ng-leave {
     z-index: 2;
@@ -404,33 +409,48 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
 /**
  * iPad doesn't like box shadows
  */
-/*
 .grade-a:not(.platform-ipad) {
+  .slide-ios,
   .slide-left-right-ios7, .slide-right-left-ios7.reverse {
     > .ng-enter, &.ng-enter {
-      box-shadow: $ios-transition-box-shadow-start;
+      box-shadow: none;
     }
     > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
-      box-shadow: $ios-transition-box-shadow-end;
+      box-shadow: $ios-transition-box-shadow;
+    }
+    > .ng-leave, &.ng-leave {
+      opacity: 1;
+    }
+    > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+      opacity: 0.9;
     }
   }
+  .slide-ios.reverse,
   .slide-left-right-ios7.reverse, .slide-right-left-ios7 {
+    > .ng-enter, &.ng-enter {
+      opacity: 0.9;
+    }
+    > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+      opacity: 1;
+    }
     > .ng-leave, &.ng-leave {
-      //box-shadow: $ios-transition-box-shadow-end;
+      box-shadow: 0px 0px 12px rgba(0,0,0,0.5);
+      opacity: 1;
     }
     > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
-      //box-shadow: $ios-transition-box-shadow-start;
+      box-shadow: none;
     }
   }
 }
-*/
 .grade-a.platform-ipad {
+  .slide-ios,
   .slide-left-right-ios7, .slide-right-left-ios7.reverse {
     > .ng-enter, &.ng-enter {
       border-left: 1px solid #ddd;
     }
   }
 
+  .slide-ios.reverse,
   .slide-left-right-ios7.reverse, .slide-right-left-ios7 {
     > .ng-leave, &.ng-leave {
       border-left: 1px solid #ddd;
@@ -438,14 +458,13 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
   }
 }
 
+$full-slide-timing-function: ease-in-out;
+$full-slide-transition-duration: 340ms;
 
-/**
- * Android style "pop in" with fade and scale
- */
-.fade-explode {
+.full-slide {
   > .ng-enter, &.ng-enter,
   > .ng-leave, &.ng-leave {
-    @include transition(all ease-out 300ms);
+    @include transition(all $full-slide-timing-function $full-slide-transition-duration);
     position: absolute;
     top: 0;
     right: -1px;
@@ -453,30 +472,58 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
     left: -1px;
     width: auto;
     &:not(.bar) {
-      border-right: 1px solid #ddd;
-      border-left: 1px solid #ddd;
+      border-right: none;
+      border-left: none;
     }
+    border-right: none;
+    border-left: none;
   }
   > .ng-enter, &.ng-enter {
     /* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
-    @include scale(1.6);
-    opacity: 0;
-    z-index: 2;
+    @include translate3d(100%, 0, 0);
   }
   > .ng-leave, &.ng-leave {
     z-index: 1;
   }
   > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
     /* NEW content ACTIVELY sliding IN from the RIGHT */
-    @include scale(1);
-    opacity: 1;
+    @include translate3d(0, 0, 0);
   }
   > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
     /* OLD content ACTIVELY sliding OUT to the LEFT */
-    @include scale(0.95);
+    @include translate3d(-100%, 0, 0);
+  }
+}
+.full-slide.reverse {
+  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+    @include transition(all $full-slide-timing-function $full-slide-transition-duration);
+    position: absolute;
+    top: 0;
+    right: -1px;
+    bottom: 0;
+    left: -1px;
+    width: auto;
+    border-right: none;
+    border-left: none;
+  }
+  > .ng-enter, &.ng-enter {
+    /* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
+    @include translate3d(-100%, 0, 0);
+  }
+  > .ng-leave, &.ng-leave {
+    z-index: 2;
+  }
+  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+    /* NEW content ACTIVELY sliding IN from the LEFT */
+    @include translate3d(0, 0, 0);
+  }
+  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+    /* OLD content ACTIVELY sliding OUT to the RIGHT */
+    @include translate3d(100%, 0, 0);
   }
 }
 
+
 .fade-explode.reverse {
   > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
     @include transition(all ease-out 300ms);
@@ -736,11 +783,12 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
 /**
  * Some component specific animations
  */
-$nav-title-slide-ios7-delay: $ios7-transition-duration;
+$nav-title-slide-ios-delay: $ios-transition-duration;
+.nav-title-slide-ios,
 .nav-title-slide-ios7 {
   &:not(.no-animation) .button.back-button {
-    @include transition(all $nav-title-slide-ios7-delay);
-    @include transition-timing-function($ios7-timing-function);
+    @include transition(all $nav-title-slide-ios-delay);
+    @include transition-timing-function($ios-timing-function);
 
     @include translate3d(0%, 0, 0);
     opacity: 1;
@@ -761,8 +809,8 @@ $nav-title-slide-ios7-delay: $ios7-transition-duration;
   }
   > .ng-enter, &.ng-enter,
   > .ng-leave, &.ng-leave {
-    @include transition(all $nav-title-slide-ios7-delay);
-    @include transition-timing-function($ios7-timing-function);
+    @include transition(all $nav-title-slide-ios-delay);
+    @include transition-timing-function($ios-timing-function);
     opacity: 1;
   }
   > .ng-enter, &.ng-enter {
@@ -784,8 +832,8 @@ $nav-title-slide-ios7-delay: $ios7-transition-duration;
   &.reverse {
     > .ng-enter, &.ng-enter,
     > .ng-leave, &.ng-leave {
-      @include transition(all $nav-title-slide-ios7-delay);
-      @include transition-timing-function($ios7-timing-function);
+      @include transition(all $nav-title-slide-ios-delay);
+      @include transition-timing-function($ios-timing-function);
       opacity: 1;
     }
     > .ng-enter, &.ng-enter {
@@ -803,6 +851,78 @@ $nav-title-slide-ios7-delay: $ios7-transition-duration;
   }
 }
 
+
+/**
+ * Some component specific animations
+ */
+$nav-title-slide-full-duration: $full-slide-transition-duration;
+.nav-title-slide-full {
+  &:not(.no-animation) .button.back-button {
+    @include transition(all $nav-title-slide-full-duration);
+    @include transition-timing-function($full-slide-timing-function);
+
+    @include translate3d(0%, 0, 0);
+    opacity: 1;
+    &.active, &.activated {
+      opacity: 0.5;
+    }
+    &.ng-hide {
+      opacity: 0;
+      @include translate3d(30%, 0, 0);
+    }
+    &.ng-hide-add,
+    &.ng-hide-remove {
+      display: block !important;
+    }
+    &.ng-hide-add {
+      position: absolute;
+    }
+  }
+  > .ng-enter, &.ng-enter,
+  > .ng-leave, &.ng-leave {
+    @include transition(all $nav-title-slide-full-duration);
+    @include transition-timing-function($full-slide-timing-function);
+    opacity: 1;
+  }
+  > .ng-enter, &.ng-enter {
+    @include translate3d(30%, 0, 0);
+    opacity: 0;
+    &.title {
+      @include translate3d(100%, 0, 0);
+    }
+  }
+  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+    @include translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+    @include translate3d(-30%, 0, 0);
+    opacity: 0;
+  }
+
+  &.reverse {
+    > .ng-enter, &.ng-enter,
+    > .ng-leave, &.ng-leave {
+      @include transition(all $nav-title-slide-full-duration);
+      @include transition-timing-function($full-slide-timing-function);
+      opacity: 1;
+    }
+    > .ng-enter, &.ng-enter {
+      @include translate3d(-30%, 0, 0);
+      opacity: 0;
+    }
+    > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+      @include translate3d(0, 0, 0);
+      opacity: 1;
+    }
+    > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+      @include translate3d(100%, 0, 0);
+      opacity: 0;
+    }
+  }
+}
+
+
 $nav-title-android-delay: 200ms;
 $nav-title-android-timing-function: linear;
 
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index a4af0ba2742..d490aa5b8fe 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -346,3 +346,12 @@ ion-infinite-scroll {
   background-color: $base-background-color;
   overflow: hidden;
 }
+
+ion-nav-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+}
diff --git a/test/html/nav.html b/test/html/nav.html
index 84dcd789f22..3dcd555413a 100644
--- a/test/html/nav.html
+++ b/test/html/nav.html
@@ -24,8 +24,6 @@
       <ion-view title="Page 1">
         <ion-nav-buttons side="right">
           <button class="button button-icon ion-android-search"></button>
-          <button class="button button-icon ion-android-information"></button>
-          <button class="button button-icon ion-android-share"></button>
         </ion-nav-buttons>
         <ion-content padding="true">
           <ion-list>

From 96a1a4cd7df26e770c2f6698eeffddaf7a4f59e5 Mon Sep 17 00:00:00 2001
From: Max Lynch <ihasmax@gmail.com>
Date: Sat, 23 Aug 2014 13:13:40 -0500
Subject: [PATCH 2/5] Fixed for platforms

---
 js/angular/service/platform.js | 8 ++++----
 scss/_animations.scss          | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/angular/service/platform.js b/js/angular/service/platform.js
index de5a3899cd6..71a7ac03af1 100644
--- a/js/angular/service/platform.js
+++ b/js/angular/service/platform.js
@@ -14,13 +14,13 @@ IonicModule
 .constant('$ionicPlatformDefaults', {
   'ios': {
     '$ionicNavBarConfig': {
-      transition: 'nav-title-slide-full',//nav-title-slide-ios7',
+      transition: 'nav-title-slide-ios',//nav-title-slide-ios7',
       alignTitle: 'center',
       backButtonIcon: 'ion-ios7-arrow-back'
     },
     '$ionicNavViewConfig': {
       //transition: 'slide-left-right-ios'
-      transition: 'full-slide'
+      transition: 'slide-ios'
     },
     '$ionicTabsConfig': {
       type: '',
@@ -29,12 +29,12 @@ IonicModule
   },
   'android': {
     '$ionicNavBarConfig': {
-      transition: 'nav-title-slide-ios7',
+      transition: 'nav-title-slide-full',
       alignTitle: 'center',
       backButtonIcon: 'ion-ios7-arrow-back'
     },
     '$ionicNavViewConfig': {
-      transition: 'slide-ios'
+      transition: 'slide-full'
     },
     '$ionicTabsConfig': {
       type: 'tabs-striped',
diff --git a/scss/_animations.scss b/scss/_animations.scss
index 5f0fa3bd528..873b7bb2319 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -333,7 +333,7 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
  * --------------------------------------------------
  */
 $ios-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
-$ios-transition-duration: 6340ms;
+$ios-transition-duration: 340ms;
 $ios-transition-box-shadow: 0px 0px 12px rgba(0,0,0,0.5);
 /*
 $ios-transition-box-shadow-start: -200px 0px 200px rgba(0,0,0,0), -5px 0px 5px rgba(0,0,0,0.01);
@@ -461,7 +461,7 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
 $full-slide-timing-function: ease-in-out;
 $full-slide-transition-duration: 340ms;
 
-.full-slide {
+.slide-full {
   > .ng-enter, &.ng-enter,
   > .ng-leave, &.ng-leave {
     @include transition(all $full-slide-timing-function $full-slide-transition-duration);
@@ -494,7 +494,7 @@ $full-slide-transition-duration: 340ms;
     @include translate3d(-100%, 0, 0);
   }
 }
-.full-slide.reverse {
+.slide-full.reverse {
   > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
     @include transition(all $full-slide-timing-function $full-slide-transition-duration);
     position: absolute;

From b49c0248efa7dd896c4af3bde0eaf579b3880e2b Mon Sep 17 00:00:00 2001
From: Max Lynch <ihasmax@gmail.com>
Date: Sat, 23 Aug 2014 13:28:31 -0500
Subject: [PATCH 3/5] Slowed down animation a bit

---
 scss/_animations.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scss/_animations.scss b/scss/_animations.scss
index 873b7bb2319..b1ae248c14f 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -333,7 +333,7 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
  * --------------------------------------------------
  */
 $ios-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
-$ios-transition-duration: 340ms;
+$ios-transition-duration: 400ms;
 $ios-transition-box-shadow: 0px 0px 12px rgba(0,0,0,0.5);
 /*
 $ios-transition-box-shadow-start: -200px 0px 200px rgba(0,0,0,0), -5px 0px 5px rgba(0,0,0,0.01);
@@ -459,7 +459,7 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
 }
 
 $full-slide-timing-function: ease-in-out;
-$full-slide-transition-duration: 340ms;
+$full-slide-transition-duration: 400ms;
 
 .slide-full {
   > .ng-enter, &.ng-enter,

From d0a76d89c599c16b4cf36bee6b6cb347ae0b3344 Mon Sep 17 00:00:00 2001
From: Max Lynch <ihasmax@gmail.com>
Date: Sun, 24 Aug 2014 09:25:51 -0500
Subject: [PATCH 4/5] Fixed border issue

---
 scss/_animations.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scss/_animations.scss b/scss/_animations.scss
index b1ae248c14f..2739a3b393a 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -348,9 +348,9 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
     @include transition(all $ios-timing-function $ios-transition-duration);
     position: absolute;
     top: 0;
-    right: -1px;
+    //right: -1px;
     bottom: 0;
-    left: -1px;
+    //left: -1px;
     width: auto;
     &:not(.bar) {
       border-right: none;
@@ -382,9 +382,9 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
     @include transition(all $ios-timing-function $ios-transition-duration);
     position: absolute;
     top: 0;
-    right: -1px;
+    //right: -1px;
     bottom: 0;
-    left: -1px;
+    //left: -1px;
     width: auto;
     border-right: none;
     border-left: none;

From 527fc401b9b13c7f5fab018998853d0ee3d2c835 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Sun, 24 Aug 2014 14:42:40 -0500
Subject: [PATCH 5/5] Added transparency for iPad

---
 scss/_animations.scss | 25 +++++++------------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/scss/_animations.scss b/scss/_animations.scss
index 2739a3b393a..d79ad7df3f8 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -409,14 +409,18 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
 /**
  * iPad doesn't like box shadows
  */
-.grade-a:not(.platform-ipad) {
+.grade-a {
   .slide-ios,
   .slide-left-right-ios7, .slide-right-left-ios7.reverse {
     > .ng-enter, &.ng-enter {
-      box-shadow: none;
+      &:not(.platform-ipad) {
+        box-shadow: none;
+      }
     }
     > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
-      box-shadow: $ios-transition-box-shadow;
+      &:not(.platform-ipad) {
+        box-shadow: $ios-transition-box-shadow;
+      }
     }
     > .ng-leave, &.ng-leave {
       opacity: 1;
@@ -442,21 +446,6 @@ $ios-transition-box-shadow-end: -200px 0px 200px rgba(0,0,0,0.15), -5px 0px 5px
     }
   }
 }
-.grade-a.platform-ipad {
-  .slide-ios,
-  .slide-left-right-ios7, .slide-right-left-ios7.reverse {
-    > .ng-enter, &.ng-enter {
-      border-left: 1px solid #ddd;
-    }
-  }
-
-  .slide-ios.reverse,
-  .slide-left-right-ios7.reverse, .slide-right-left-ios7 {
-    > .ng-leave, &.ng-leave {
-      border-left: 1px solid #ddd;
-    }
-  }
-}
 
 $full-slide-timing-function: ease-in-out;
 $full-slide-transition-duration: 400ms;