refactor(navbar): improved navbar transitions

ionic/components/toolbar/modes/ios.scss

@@ -17,8 +17,6 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
 
 .toolbar {
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
   min-height: $toolbar-ios-height;
 
   [menu-toggle] {
@@ -66,6 +64,11 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
 }
 
+.toolbar .toolbar-background {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
 ion-title {
   position: absolute;
   top: 0;
@@ -93,6 +96,6 @@ ion-nav-items[secondary] {
   order: map-get($toolbar-order-ios, secondary);
 }
 
-&.hairlines .toolbar {
+&.hairlines .toolbar .toolbar-background {
   border-bottom-width: 0.55px;
 }

ionic/components/toolbar/toolbar.scss

@@ -28,10 +28,6 @@ $toolbar-order: (
   padding: $toolbar-padding;
   width: 100%;
 
-  border: 0;
-  border-color: $toolbar-border-color;
-  background-color: $toolbar-background-color;
-
   button,
   [button] {
     background-color: transparent;
@@ -40,6 +36,21 @@ $toolbar-order: (
   }
 }
 
+.toolbar .toolbar-background {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $z-index-toolbar-background;
+
+  border: 0;
+  border-color: $toolbar-border-color;
+  background-color: $toolbar-background-color;
+
+  pointer-events: none;
+}
+
 .enable-hover .toolbar button:hover,
 .enable-hover .toolbar [button]:hover,
 .toolbar button.activated,
@@ -120,8 +131,11 @@ ion-nav-items div {
 @each $color-name, $color-value in $colors {
 
   .toolbar[#{$color-name}] {
-    background-color: $color-value;
-    border-color: darken($color-value, 10%);
+
+    .toolbar-background {
+      background-color: $color-value;
+      border-color: darken($color-value, 10%);
+    }
 
     .toolbar-title,
     button,

ionic/components/toolbar/toolbar.ts

@@ -69,7 +69,8 @@ export class ToolbarBase extends Ion  {
       '<ng-content select="ion-title"></ng-content>' +
       '<ng-content select="ion-nav-items[primary]"></ng-content>' +
       '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
-    '</div>'
+    '</div>' +
+    '<div class="toolbar-background"></div>'
 })
 export class Toolbar extends ToolbarBase {
   constructor(