diff --git a/ionic/animations/animation.ts b/ionic/animations/animation.ts
index af9db27e1b..79c1b85b04 100644
--- a/ionic/animations/animation.ts
+++ b/ionic/animations/animation.ts
@@ -31,6 +31,7 @@ export class Animation {
     this._ani = [];
 
     this._bfAdd = [];
+    this._bfSty = {};
     this._bfRmv = [];
     this._afAdd = [];
     this._afRmv = [];
@@ -162,6 +163,9 @@ export class Animation {
       removeClass: (className) => {
         this._bfRmv.push(className);
         return this;
+      },
+      setStyles: (styles) => {
+        this._bfSty = styles;
       }
     }
   }
@@ -247,7 +251,7 @@ export class Animation {
     if (!this._isStaged) {
       this._isStaged = true;
 
-      let i, l, j, ele, animation;
+      let i, p, l, j, ele, animation;
 
       for (i = 0, l = this._chld.length; i < l; i++) {
         this._chld[i].stage();
@@ -260,6 +264,10 @@ export class Animation {
           ele.classList.add(this._bfAdd[j]);
         }
 
+        for (p in this._bfSty) {
+          ele.style[p] = this._bfSty[p];
+        }
+
         for (j = 0; j < this._bfRmv.length; j++) {
           ele.classList.remove(this._bfRmv[j]);
         }
diff --git a/ionic/components/view/view-controller.ts b/ionic/components/view/view-controller.ts
index ad76784bf8..1bc26e25b6 100644
--- a/ionic/components/view/view-controller.ts
+++ b/ionic/components/view/view-controller.ts
@@ -511,6 +511,10 @@ export class ViewController extends Ion {
     util.array.remove(this.items, itemOrIndex);
   }
 
+  indexOf(item) {
+    return this.items.indexOf(item);
+  }
+
   length() {
     return this.items.length;
   }
diff --git a/ionic/components/view/view-item.ts b/ionic/components/view/view-item.ts
index 2ba25173a8..ec7be2f67a 100644
--- a/ionic/components/view/view-item.ts
+++ b/ionic/components/view/view-item.ts
@@ -170,6 +170,10 @@ export class ViewItem {
     this.instance._viewItem = this;
   }
 
+  get index() {
+    return (this.viewCtrl ? this.viewCtrl.indexOf(this) : -1);
+  }
+
   destroy() {
     for (let i = 0; i < this.disposals.length; i++) {
       this.disposals[i]();
diff --git a/ionic/transitions/ios-transition.ts b/ionic/transitions/ios-transition.ts
index 34b5d40f47..a178855339 100644
--- a/ionic/transitions/ios-transition.ts
+++ b/ionic/transitions/ios-transition.ts
@@ -2,7 +2,7 @@ import {Transition} from './transition';
 import {Animation} from '../animations/animation';
 
 
-const DURATION = 600;
+const DURATION = 6000;
 const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
 
 const OPACITY = 'opacity';
@@ -26,7 +26,8 @@ class IOSTransition extends Transition {
     // entering item moves to center
     this.enteringView
       .to(TRANSLATEX, CENTER)
-      .to(OPACITY, 1);
+      .to(OPACITY, 1)
+      .before.setStyles({ zIndex: this.entering.index });
 
     this.enteringTitle
       .fadeIn()
@@ -35,7 +36,8 @@ class IOSTransition extends Transition {
     // leaving view moves off screen
     this.leavingView
       .from(TRANSLATEX, CENTER)
-      .from(OPACITY, 1);
+      .from(OPACITY, 1)
+      .before.setStyles({ zIndex: this.leaving.index });
 
     this.leavingTitle
       .from(TRANSLATEX, CENTER)