fix(tab): correct lifecycle calls

ionic/components/tabs/tab.ts

@@ -86,26 +86,24 @@ export class Tab extends NavController {
   }
 
   onInit() {
-    console.debug('Tab onInit', this.index);
-
     if (this._isInitial) {
       this.tabs.select(this);
 
     } else if (this.tabs.preloadTabs) {
       setTimeout(() => {
-        this.load(() => {
-          console.debug('preloaded tab', this.index);
+        let opts = {
+          animate: false,
+          preload: true
+        };
+        this.load(opts, () => {
           this.hideNavbars(true);
         });
-      }, 500 * this.index);
+      }, 1000 * this.index);
     }
   }
 
-  load(done) {
+  load(opts, done) {
     if (!this._loaded && this.root) {
-      let opts = {
-        animate: false
-      };
       this.push(this.root, null, opts).then(done);
       this._loaded = true;
 

ionic/components/tabs/tabs.ts

@@ -152,7 +152,7 @@ export class Tabs extends Ion {
       return Promise.reject();
     }
 
-    console.debug('select tab', selectedTab.id);
+    console.time('select tab ' + selectedTab.id);
 
     let deselectedTab = this.getSelected();
 
@@ -161,14 +161,32 @@ export class Tabs extends Ion {
       return this.touchActive(selectedTab);
     }
 
-    selectedTab.load(() => {
-      this.isReady && this.isReady();
+    let opts = {
+      animate: false
+    };
 
+    let deselectedPage;
+    if (deselectedTab) {
+      deselectedPage = deselectedTab.getActive();
+      deselectedPage && deselectedPage.willLeave();
+    }
+
+    let selectedPage = selectedTab.getActive();
+    selectedPage && selectedPage.willEnter();
+
+    selectedTab.load(opts, () => {
       this.tabs.forEach(tab => {
         tab.setSelected(tab === selectedTab);
       });
 
       this.highlight && this.highlight.select(selectedTab);
+
+      selectedPage && selectedPage.didEnter();
+      deselectedPage && deselectedPage.didLeave();
+
+      this.isReady && this.isReady();
+
+      console.timeEnd('select tab ' + selectedTab.id);
     });
   }
 
@@ -270,7 +288,6 @@ class TabHighlight {
   }
 
   select(tab) {
-    setTimeout(() => {
     let d = tab.btn.getDimensions();
     let ele = this.elementRef.nativeElement;
     ele.style.transform = 'translate3d(' + d.left + 'px,0,0) scaleX(' + d.width + ')';
@@ -281,7 +298,6 @@ class TabHighlight {
         ele.classList.add('animate');
       }, 64)
     }
-    }, 32);
   }
 
 }