update MD transitions

ionic/transitions/ios-transition.ts

@@ -1,4 +1,4 @@
-import {Transition, ViewTransition} from './transition';
+import {Transition} from './transition';
 import {Animation} from '../animations/animation';
 
 const DURATION = 550;

ionic/transitions/md-transition.ts

@@ -1,127 +1,121 @@
-import {Transition, ViewTransition} from './transition';
+import {Transition} from './transition';
 import {Animation} from '../animations/animation';
 
-const TRANSLATE_Y = 'translateY';
+const TRANSLATEY = 'translateY';
 const OFF_BOTTOM = '40px';
 const CENTER = '0px'
+const SHOW_NAVBAR_CSS = 'show-navbar';
+const SHOW_VIEW_CSS = 'show-view';
+const SHOW_BACK_BTN_CSS = 'show-back-button';
+const TABBAR_HEIGHT = '69px';
 
 
-class MDTransition extends Transition {
+class MDTransition extends Animation {
 
   constructor(navCtrl, opts) {
     opts.renderDelay = 160;
-    super(navCtrl, opts, MDEnteringTransition, MDLeavingTransition);
+    super(null, opts);
-  }
 
-}
+    // what direction is the transition going
+    let backDirection = (opts.direction === 'back');
 
-class MDEnteringTransition extends ViewTransition {
+    // get entering/leaving views
+    let enteringView = navCtrl.getStagedEnteringView();
+    let leavingView = navCtrl.getStagedLeavingView();
 
-  constructor(navCtrl, viewCtrl, opts) {
+    // do they have navbars?
-    super(navCtrl, viewCtrl, opts);
+    let enteringHasNavbar = enteringView.hasNavbar();
+    let leavingHasNavbar = leavingView && leavingView.hasNavbar();
 
-    // entering item moves in bottom to center
-    this.content
-      .to(TRANSLATE_Y, CENTER)
-      .before.setStyles({ zIndex: viewCtrl.index });
 
-    // entering item moves in bottom to center
+    // entering content item moves in bottom to center
-    this.navbar
+    let enteringContent = new Animation(enteringView.contentRef());
-      .to(TRANSLATE_Y, CENTER)
+    enteringContent
-      .fadeIn()
+      .before.addClass(SHOW_VIEW_CSS)
-      .before.addClass('show-navbar')
+      .before.setStyles({ zIndex: enteringView.index });
-      .before.setStyles({ zIndex: viewCtrl.index + 10 });
+    this.add(enteringContent);
 
-    if (viewCtrl.enableBack()) {
+    if (backDirection) {
-      this.backButton.before.addClass('show-back-button');
-    }
-
-    // set properties depending on direction
-    if (opts.direction === 'back') {
       this.duration(200).easing('cubic-bezier(0.47,0,0.745,0.715)');
-
+      enteringContent.fromTo(TRANSLATEY, CENTER, CENTER);
-      // back direction
-      this.content
-        .from(TRANSLATE_Y, CENTER);
-
-      this.navbar
-        .from(TRANSLATE_Y, CENTER);
 
     } else {
-      // forward direction
       this.duration(280).easing('cubic-bezier(0.36,0.66,0.04,1)');
-
+      enteringContent
-      this.content
+        .fromTo(TRANSLATEY, OFF_BOTTOM, CENTER)
-        .from(TRANSLATE_Y, OFF_BOTTOM)
-        .fadeIn();
-
-      this.navbar
-        .from(TRANSLATE_Y, OFF_BOTTOM)
         .fadeIn();
     }
 
-    let viewLength = navCtrl.length();
-    if ((viewLength === 1 || viewLength === 2) && navCtrl.tabs) {
-      let tabBarEle = navCtrl.tabs.elementRef.nativeElement.querySelector('ion-tab-bar-section');
-      let tabBar = new Animation(tabBarEle);
 
-      if (viewLength === 1 && opts.direction == 'back') {
+    // entering navbar
-        tabBar.fromTo('height', '0px', '69px');
+    if (enteringHasNavbar) {
-        tabBar.fadeIn();
+      let enteringNavBar = new Animation(enteringView.navbarRef());
+      enteringNavBar
+        .before.addClass(SHOW_NAVBAR_CSS)
+        .before.setStyles({ zIndex: enteringView.index + 10 });
+      this.add(enteringNavBar);
 
-      } else if (viewLength === 2 && opts.direction == 'forward') {
+      if (backDirection) {
-        tabBar.fromTo('height', '69px', '0px');
+        enteringNavBar.fromTo(TRANSLATEY, CENTER, CENTER);
-        tabBar.fadeOut();
+
+      } else {
+        enteringNavBar
+          .fromTo(TRANSLATEY, OFF_BOTTOM, CENTER)
+          .fadeIn();
       }
 
-      this.add(tabBar);
+      if (enteringView.enableBack()) {
+        let enteringBackButton = new Animation(enteringView.backBtnRef());
+        enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
+        enteringNavBar.add(enteringBackButton);
+      }
     }
 
-  }
+    // setup leaving view
+    if (leavingView) {
+      // leaving content
+      let leavingContent = new Animation(leavingView.contentRef());
+      this.add(leavingContent);
+      leavingContent
+        .before.addClass(SHOW_VIEW_CSS)
+        .before.setStyles({ zIndex: leavingView.index });
 
-}
 
-class MDLeavingTransition extends ViewTransition {
+      if (backDirection) {
-
-  constructor(navCtrl, viewCtrl, opts) {
-    super(navCtrl, viewCtrl, opts);
-
-    // leaving viewCtrl stays put
-    this.content
-      .before.setStyles({ zIndex: viewCtrl.index })
-      .after.removeClass('show-view');
-
-    this.navbar
-      .before.setStyles({ zIndex: viewCtrl.index + 10 })
-      .after.removeClass('show-navbar')
-      .fadeOut();
-
-    // set properties depending on direction
-    if (opts.direction === 'back') {
         this.duration(200).easing('cubic-bezier(0.47,0,0.745,0.715)');
-
+        leavingContent
-      // leaving viewCtrl goes center to bottom
+          .fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
-      this.content
-        .fromTo(TRANSLATE_Y, CENTER, OFF_BOTTOM)
           .fadeOut();
+      }
 
-      this.navbar
+
-        .fromTo(TRANSLATE_Y, CENTER, OFF_BOTTOM)
+      if (leavingHasNavbar) {
+        if (backDirection) {
+          let leavingNavBar = new Animation(leavingView.navbarRef());
+          this.add(leavingNavBar);
+
+          leavingNavBar
+            .before.setStyles({ zIndex: leavingView.index + 10 })
             .fadeOut();
         }
 
+      }
+    }
+
     let viewLength = navCtrl.length();
     if ((viewLength === 1 || viewLength === 2) && navCtrl.tabs) {
       let tabBarEle = navCtrl.tabs.elementRef.nativeElement.querySelector('ion-tab-bar-section');
       let tabBar = new Animation(tabBarEle);
 
-      if (viewLength === 1 && opts.direction == 'back') {
+      if (viewLength === 1 && backDirection) {
-        tabBar.fromTo('height', '0px', '69px');
+        tabBar
-        tabBar.fadeIn();
+          .fromTo('height', '0px', TABBAR_HEIGHT)
+          .fadeIn();
 
-      } else if (viewLength === 2 && opts.direction == 'forward') {
+      } else if (viewLength === 2 && !backDirection) {
-        tabBar.fromTo('height', '69px', '0px');
+        tabBar
-        tabBar.fadeOut();
+          .fromTo('height', TABBAR_HEIGHT, '0px')
+          .fadeOut();
       }
 
       this.add(tabBar);

ionic/transitions/transition.ts

@@ -1,30 +1,7 @@
-import {Animation} from '../animations/animation';
-import {IonicConfig} from  '../config/config';
-
-const SHOW_NAVBAR_CSS = 'show-navbar';
-const SHOW_VIEW_CSS = 'show-view';
-const SHOW_BACK_BUTTON = 'show-back-button';
 
 
-export class Transition extends Animation {
+export class Transition {
 
-  constructor(navCtrl, opts, EnteringTransition, LeavingTransition) {
-    super(null, opts);
-
-    let enteringView = navCtrl.getStagedEnteringView();
-    if (enteringView) {
-      this.add( new EnteringTransition(navCtrl, enteringView, opts) );
-    }
-
-    let leavingView = navCtrl.getStagedLeavingView();
-    if (leavingView) {
-      this.add( new LeavingTransition(navCtrl, leavingView, opts) );
-    }
-  }
-
-  /*
-   STATIC CLASSES
-   */
   static create(navCtrl, opts = {}) {
     const name = opts.animation || 'ios';
 
@@ -42,32 +19,4 @@ export class Transition extends Animation {
 
 }
 
-
-export class ViewTransition extends Animation {
-
-  constructor(navCtrl, viewCtrl, opts) {
-    super(null, opts);
-
-    // create animation for the entering view's content area
-    this.content = new Animation(viewCtrl.contentRef());
-    this.content.before.addClass(SHOW_VIEW_CSS);
-    this.add(this.content);
-
-    this.navbar = new Animation(viewCtrl.navbarRef());
-    this.backButton = new Animation(viewCtrl.backBtnRef());
-    this.title = new Animation(viewCtrl.titleRef());
-    this.navbarItems = new Animation(viewCtrl.navbarItemRefs());
-    this.navbarBg = new Animation(viewCtrl.navbarBgRef());
-
-    this.navbar
-      .add(this.backButton)
-      .add(this.title)
-      .add(this.navbarItems)
-      .add(this.navbarBg);
-
-    this.add(this.navbar);
-  }
-
-}
-
 let transitionRegistry = {};