transition wip

ionic/components/app/structure.scss

@@ -10,7 +10,7 @@ body {
   max-height: 100%;
   margin: 0;
   padding: 0;
-  word-wrap: break-word;g
+  word-wrap: break-word;
 
   touch-action: manipulation;
   -webkit-touch-callout: none;
@@ -59,9 +59,12 @@ ion-pane {
   width: 100%;
   height: 100%;
   overflow: hidden;
-
-  display: flex;
   flex-direction: column;
+
+  display:none;
+  &.show-pane {
+    display: flex;
+  }
 }
 
 .nav-item {

ionic/components/nav/pane.js

@@ -105,10 +105,23 @@ export class PaneController {
   `,
   directives: [PaneAnchor, PaneContentAnchor, SwipeHandle]
 })
-class Pane {
-  constructor(viewCtrl: ViewController) {
+export class Pane {
+  constructor(viewCtrl: ViewController, elementRef: ElementRef) {
+    this.domElement = elementRef.domElement;
     viewCtrl.panes.add(this);
   }
+
+  width() {
+    return this.domElement.offsetWidth;
+  }
+
+  isTransitioning(val) {
+    this.domElement.classList[val ? 'add' : 'remove']('transitioning');
+  }
+
+  showPane(val) {
+    this.domElement.classList[val ? 'add' : 'remove']('show-pane');
+  }
 }
 
 

ionic/components/nav/swipe-handle.js

@@ -1,8 +1,10 @@
+import {Parent} from 'angular2/src/core/annotations_impl/visibility';
 import {ElementRef} from 'angular2/angular2'
 import {Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {Optional} from 'angular2/src/di/annotations_impl';
 
 import {ViewController} from '../view/view-controller';
+import {Pane} from './pane';
 import {Gesture} from 'ionic/gestures/gesture';
 
 
@@ -15,6 +17,7 @@ import {Gesture} from 'ionic/gestures/gesture';
 export class SwipeHandle {
   constructor(
     @Optional() viewCtrl: ViewController,
+    @Parent() pane: Pane,
     elementRef: ElementRef
   ) {
     if (!viewCtrl) return;
@@ -69,11 +72,12 @@ export class SwipeHandle {
 
     function onDragHorizontal(ev) {
       if (startX === null) {
+        // starting drag
         ev.preventDefault();
         ev.stopPropagation();
 
         startX = ev.gesture.center.x;
-        swipeableAreaWidth = viewCtrl.width() - startX;
+        swipeableAreaWidth = pane.width() - startX;
 
         viewCtrl.swipeBackStart();
       }

ionic/components/view/view-controller.js

@@ -75,7 +75,7 @@ export class ViewController {
   }
 
   pop(opts = {}) {
-    if (this.isTransitioning() || this.items.length < 1) {
+    if (this.isTransitioning() || this.items.length < 2) {
       return Promise.reject();
     }
 
@@ -150,9 +150,7 @@ export class ViewController {
         leavingItem.state = ACTIVELY_LEAVING_STATE;
 
         // start the transition
-        console.log('transition play')
-        transAnimation.play(true).then(() => {
-          console.log('transition finished')
+        transAnimation.play().then(() => {
 
           // transition has completed, update each item's state
           enteringItem.state = ACTIVE_STATE;
@@ -308,7 +306,6 @@ export class ViewController {
     if (opts.animate) {
       // block possible clicks during transition
       ClickBlock(true, 520);
-      this.getContainerElement().classList.add('transitioning');
     }
   }
 
@@ -327,8 +324,6 @@ export class ViewController {
       }
     });
 
-    this.getContainerElement().classList.remove('transitioning');
-
     // allow clicks again
     ClickBlock(false);
   }
@@ -399,10 +394,6 @@ export class ViewController {
     return null;
   }
 
-  getContainerElement() {
-    return this.elementRef.domElement;
-  }
-
   navbarViewContainer(nbContainer) {
     if (nbContainer) {
       this._nbContainer = nbContainer;
@@ -463,10 +454,6 @@ export class ViewController {
     return (item && item.state === STAGED_ENTERING_STATE);
   }
 
-  width() {
-    return this.getContainerElement().offsetWidth;
-  }
-
 }
 
 const ACTIVE_STATE = 1;

ionic/components/view/view-item.js

@@ -50,6 +50,7 @@ export class ViewItem {
 
       // get the appropriate Pane which this ViewItem will fit into
       viewCtrl.panes.get(itemStructure, pane => {
+        this.pane = pane;
 
         // create a new injector just for this ViewItem
         let injector = viewCtrl.injector.resolveAndCreateChild([
@@ -254,6 +255,7 @@ export class ViewItem {
     The view is about to enter and become the active view.
   */
   willEnter() {
+    this.pane && this.pane.isTransitioning(true);
     this.instance && this.instance.viewWillEnter && this.instance.viewWillEnter();
   }
 
@@ -262,6 +264,8 @@ export class ViewItem {
     will fire, whether it was the first load or loaded from the cache.
   */
   didEnter() {
+    this.pane && this.pane.isTransitioning(false);
+    this.pane && this.pane.showPane(true);
     this.instance && this.instance.viewDidEnter && this.instance.viewDidEnter();
   }
 
@@ -269,6 +273,7 @@ export class ViewItem {
     The view has is about to leave and no longer be the active view.
   */
   willLeave() {
+    this.pane && this.pane.isTransitioning(true);
     this.instance && this.instance.viewWillLeave && this.instance.viewWillLeave();
   }
 
@@ -277,6 +282,7 @@ export class ViewItem {
     will fire, whether it is cached or unloaded.
   */
   didLeave() {
+    this.pane && this.pane.isTransitioning(false);
     this.instance && this.instance.viewDidLeave && this.instance.viewDidLeave();
   }