diff --git a/ionic/components/alert/alert.ts b/ionic/components/alert/alert.ts index e24e9ec051..10ebda4593 100644 --- a/ionic/components/alert/alert.ts +++ b/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); diff --git a/ionic/config/modes.ts b/ionic/config/modes.ts index fc68ea79e8..4e96d83a48 100644 --- a/ionic/config/modes.ts +++ b/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', diff --git a/ionic/index.ts b/ionic/index.ts index 23c82909f3..a34ad6c054 100644 --- a/ionic/index.ts +++ b/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' diff --git a/ionic/transitions/transition-wp.ts b/ionic/transitions/transition-wp.ts new file mode 100644 index 0000000000..364d0bc759 --- /dev/null +++ b/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);