chore(transition): tweak wp page transition animation

ionic/components/alert/alert.ts

@@ -572,7 +572,7 @@ class AlertWpPopIn extends Transition {
     backdrop.fromTo('opacity', '0.01', '0.5');
 
     this
-      .easing('cubic-bezier(0, 0, 0.05, 1)')
+      .easing('cubic-bezier(0,0 0.05,1)')
       .duration(200)
       .add(backdrop)
       .add(wrapper);

ionic/config/modes.ts

@@ -83,7 +83,7 @@ Config.setModeConfig('wp', {
   modalEnter: 'modal-md-slide-in',
   modalLeave: 'modal-md-slide-out',
 
-  pageTransition: 'md-transition',
+  pageTransition: 'wp-transition',
   pageTransitionDelay: 96,
 
   tabbarPlacement: 'top',

ionic/index.ts

@@ -28,3 +28,4 @@ import './platform/registry'
 import './animations/builtins'
 import './transitions/transition-ios'
 import './transitions/transition-md'
+import './transitions/transition-wp'

ionic/transitions/transition-wp.ts

@@ -0,0 +1,63 @@
+import {Animation} from '../animations/animation';
+import {Transition, TransitionOptions} from './transition';
+import {ViewController} from '../components/nav/view-controller';
+
+const SHOW_BACK_BTN_CSS = 'show-back-button';
+const SCALE_SMALL = .95;
+
+
+class WPTransition extends Transition {
+
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    // what direction is the transition going
+    let backDirection = (opts.direction === 'back');
+
+    // do they have navbars?
+    let enteringHasNavbar = enteringView.hasNavbar();
+    let leavingHasNavbar = leavingView && leavingView.hasNavbar();
+
+    // entering content scale from smaller to larger
+    let enteringPage = new Animation(enteringView.pageRef());
+    enteringPage.before.addClass('show-page');
+    this.add(enteringPage);
+
+    if (backDirection) {
+      this.duration(opts.duration || 120).easing('cubic-bezier(0.47,0,0.745,0.715)');
+      enteringPage.before.clearStyles(['scale']);
+
+    } else {
+      this.duration(opts.duration || 280).easing('cubic-bezier(0,0 0.05,1)');
+      enteringPage
+        .fromTo('scale', SCALE_SMALL, 1, true)
+        .fadeIn();
+    }
+
+    if (enteringHasNavbar) {
+      let enteringNavBar = new Animation(enteringView.navbarRef());
+      enteringNavBar.before.addClass('show-navbar');
+      this.add(enteringNavBar);
+
+      let enteringBackButton = new Animation(enteringView.backBtnRef());
+      this.add(enteringBackButton);
+      if (enteringView.enableBack()) {
+        enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
+      } else {
+        enteringBackButton.before.removeClass(SHOW_BACK_BTN_CSS);
+      }
+    }
+
+    // setup leaving view
+    if (leavingView && backDirection) {
+      // leaving content
+      this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
+      let leavingPage = new Animation(leavingView.pageRef());
+      this.add(leavingPage.fromTo('scale', 1, SCALE_SMALL).fadeOut());
+    }
+
+  }
+
+}
+
+Transition.register('wp-transition', WPTransition);