From 7ed53a4e7fbbdbc98d049c80c02e6105444dc81a Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 20 Jul 2015 14:26:23 -0500 Subject: [PATCH] md transition --- ionic/components/icon/icon.ts | 8 +-- .../nav/test/basic/pages/first-page.ts | 2 +- ionic/components/view/view-controller.ts | 7 +- ionic/ionic.ts | 1 + ionic/platform/registry.ts | 13 ++-- ionic/transitions/md-transition.ts | 69 +++++++------------ 6 files changed, 40 insertions(+), 60 deletions(-) diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index 200db22374..7b5671f50c 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -8,13 +8,9 @@ import {Platform} from '../../platform/platform'; /* -home: { - ios: 'ion-ios-home', +'home': { + ios: ['ion-ios-home', 'ion-ios-home-outline'], md: 'ion-md-home' -}, -star: { - ios: 'ion-ios-star', - md: 'ion-md-star', } 1-for-1 swap diff --git a/ionic/components/nav/test/basic/pages/first-page.ts b/ionic/components/nav/test/basic/pages/first-page.ts index 29efef7853..4e0e3c2aa4 100644 --- a/ionic/components/nav/test/basic/pages/first-page.ts +++ b/ionic/components/nav/test/basic/pages/first-page.ts @@ -81,6 +81,6 @@ export class FirstPage { // } push() { - this.nav.push(SecondPage, { id: 8675309, myData: [1,2,3,4] }, { animation: 'ios' }); + this.nav.push(SecondPage, { id: 8675309, myData: [1,2,3,4] } ); } } diff --git a/ionic/components/view/view-controller.ts b/ionic/components/view/view-controller.ts index 1bc26e25b6..3a0620573f 100644 --- a/ionic/components/view/view-controller.ts +++ b/ionic/components/view/view-controller.ts @@ -21,7 +21,8 @@ export class ViewController extends Ion { injector: Injector, elementRef: ElementRef ) { - super(elementRef, injector.get(IonicConfig)); + let config = injector.get(IonicConfig); + super(elementRef, config); this.parent = parentViewCtrl; @@ -30,6 +31,7 @@ export class ViewController extends Ion { this.viewMngr = injector.get(AppViewManager); this.router = injector.get(IonicRouter); this.app = injector.get(IonicApp); + this.config = config; this.router.addViewController(this); @@ -203,6 +205,9 @@ export class ViewController extends Ion { if (opts.animate === false) { opts.animation = 'none'; + + } else if (!opts.animation) { + opts.animation = this.config.setting('viewTransition'); } opts.animate = (opts.animation !== 'none'); diff --git a/ionic/ionic.ts b/ionic/ionic.ts index 80f99394d1..c7e8813a83 100644 --- a/ionic/ionic.ts +++ b/ionic/ionic.ts @@ -22,3 +22,4 @@ export * from 'ionic/animations/builtins' export * from 'ionic/transitions/transition' export * from 'ionic/transitions/ios-transition' +export * from 'ionic/transitions/md-transition' diff --git a/ionic/platform/registry.ts b/ionic/platform/registry.ts index 343cb39f90..e55f76a895 100644 --- a/ionic/platform/registry.ts +++ b/ionic/platform/registry.ts @@ -5,7 +5,8 @@ Platform.register({ name: 'core', settings: { mode: 'ios', - iconMode: 'ios' + iconMode: 'ios', + viewTransition: 'ios' } }); Platform.setDefault('core'); @@ -51,12 +52,12 @@ Platform.register({ mode: 'md', iconMode: 'md', type: 'overlay', - keyboardScrollAssist: true + keyboardScrollAssist: true, + viewTransition: 'md' }, isMatch(p) { // "silk" is kindle fire - let re = 'android| silk'; - return p.isPlatform('android', re); + return p.isPlatform('android', 'android| silk'); }, versionParser(p) { return p.matchUserAgentVersion(/Android (\d+).(\d+)?/); @@ -75,9 +76,9 @@ Platform.register({ settings: { mode: 'ios', iconMode: 'ios', - viewTransition: 'ios', tapPolyfill: true, - keyboardScrollAssist: true + keyboardScrollAssist: true, + viewTransition: 'ios' }, isMatch(p) { return p.isPlatform('ios', 'iphone|ipad|ipod'); diff --git a/ionic/transitions/md-transition.ts b/ionic/transitions/md-transition.ts index 64ae4a9b24..7c80d1c131 100644 --- a/ionic/transitions/md-transition.ts +++ b/ionic/transitions/md-transition.ts @@ -2,16 +2,12 @@ import {Transition} from './transition'; import {Animation} from '../animations/animation'; -const DURATION = 600; +const DURATION = 300; const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; -const OPACITY = 'opacity'; -const TRANSLATEX = 'translateX'; - -const OFF_RIGHT = '100%'; -const OFF_LEFT = '-33%'; +const TRANSLATEY = 'translateY'; +const OFF_BOTTOM = '5%'; const CENTER = '0%' -const OFF_OPACITY = 0.8; class MaterialTransition extends Transition { @@ -23,71 +19,52 @@ class MaterialTransition extends Transition { this.duration(DURATION); this.easing(EASING); - // entering item moves to center + // entering item moves in bottom to center this.enteringView - .to(TRANSLATEX, CENTER) - .to(OPACITY, 1) + .to(TRANSLATEY, CENTER) .before.setStyles({ zIndex: this.entering.index }); + // entering title fades in this.enteringTitle - .fadeIn() - .to(TRANSLATEX, CENTER); + .fadeIn(); - // leaving view moves off screen + // leaving view stays put this.leavingView - .from(TRANSLATEX, CENTER) - .from(OPACITY, 1) .before.setStyles({ zIndex: this.leaving.index }); + // leaving title fades out this.leavingTitle - .from(TRANSLATEX, CENTER) - .from(OPACITY, 1); + .fadeOut(); // set properties depending on direction if (opts.direction === 'back') { // back direction this.enteringView - .from(TRANSLATEX, OFF_LEFT) - .from(OPACITY, OFF_OPACITY) - .to(OPACITY, 1); - - this.enteringTitle - .from(TRANSLATEX, OFF_LEFT); - - this.leavingView - .to(TRANSLATEX, OFF_RIGHT) - .to(OPACITY, 1); + .from(TRANSLATEY, CENTER); this.leavingTitle - .to(TRANSLATEX, OFF_RIGHT) - .to(OPACITY, 0); + .fadeOut(); - if (this.leaving.enableBack() && this.viewWidth() > 200) { + // leaving view goes center to bottom + this.leavingView + .fromTo(TRANSLATEY, CENTER, OFF_BOTTOM) + .fadeOut(); + + if (this.leaving.enableBack()) { let leavingBackButtonText = new Animation(this.leaving.backButtonTextElement()); - leavingBackButtonText.fromTo(TRANSLATEX, CENTER, (this.viewWidth() / 2) + 'px'); + leavingBackButtonText.fadeOut(); this.leavingNavbar.add(leavingBackButtonText); } } else { // forward direction this.enteringView - .from(TRANSLATEX, OFF_RIGHT) - .from(OPACITY, 1); + .from(TRANSLATEY, OFF_BOTTOM) + .fadeIn(); - this.enteringTitle - .from(TRANSLATEX, OFF_RIGHT); - - this.leavingView - .to(TRANSLATEX, OFF_LEFT) - .to(OPACITY, OFF_OPACITY); - - this.leavingTitle - .to(TRANSLATEX, OFF_LEFT) - .to(OPACITY, 0); - - if (this.entering.enableBack() && this.viewWidth() > 200) { + if (this.entering.enableBack()) { let enteringBackButtonText = new Animation(this.entering.backButtonTextElement()); - enteringBackButtonText.fromTo(TRANSLATEX, (this.viewWidth() / 2) + 'px', CENTER); + enteringBackButtonText.fadeIn(); this.enteringNavbar.add(enteringBackButtonText); } }