md transition

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

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] } );
   }
 }

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');

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'

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');

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);
       }
     }