Native transitions "slide" and tabs navigation

Ionic Framework ionic-v3
1

Hi,

has anyone tried to use Native Page Transitions “slide” with a Tabs navigation? I get the native animations to work in normal navigations or push/pop pages, but I have problems using it in a Tabs navigation.

The problem is the content of the current page has disappeared when the new page animates in. This happens only in iOS. The plugin makes a screenshot of the old page, then animates the new one in and the screenshot out. In this screenshot of the old page the content area is empty. This looks bad and can not be used.

My tab code looks like this:

<ion-tabs tabsPlacement="bottom" selectedIndex="0" (ionChange)="tabChange($event)">

tabChange(event) {
    this.transitionOptions = this.settingsService.getTransitionOptions();
    this.nativePageTransitions.slide(this.transitionOptions);
}

I suspect the timing of making this screenshot is wrong here. The old tab is already hidden when the ionChange is fired and the screenshot is made. I’m just wondering why it works in Android?!?

Thanks for the help!

2

Hi, a few days ago i have the same problem.
this is a workaround, i hope you can use it.

<ion-tabs #paymentTabs tabsPlacement='top' selectedIndex="1" (ionChange)="tabChange()">
    <ion-slides (ionSlideWillChange)="slideChange()">
      <ion-slide>
          <ion-tab [root]="profileRoot" [rootParams]="tutorial"  tabIcon="person"></ion-tab>
      </ion-slide>
      <ion-slide>
          <ion-tab [root]="homeRoot" tabIcon="custom-map-b"></ion-tab>
      </ion-slide>
      <ion-slide>
          <ion-tab [root]="wishRoot"  tabIcon="custom-bag"></ion-tab>
      </ion-slide>
    </ion-slides>
  </ion-tabs>

in the .ts just need:

 @ViewChild("paymentTabs") paymentTabs: Tabs;
  @ViewChild(Slides) slides: Slides;

slideChange(){
    //console.log(this.slides.getActiveIndex());
     if(this.slides.getActiveIndex() == 0){
        this.paymentTabs.select(0);
        this.slides.slideTo(0);
      }
      if(this.slides.getActiveIndex() == 1){
        this.paymentTabs.select(1);
        this.slides.slideTo(1);
      }
      if(this.slides.getActiveIndex() == 2){
        this.paymentTabs.select(2);
        this.slides.slideTo(2);
      }
  }

  tabChange(){
    //console.log("tabchange");
    //console.log(this.paymentTabs.getSelected().index);
    if(this.paymentTabs.getSelected().index == 0){
      this.paymentTabs.select(0);
      this.slides.slideTo(0);
    }
    if(this.paymentTabs.getSelected().index == 1){
      this.paymentTabs.select(1);
      this.slides.slideTo(1);
    }
    if(this.paymentTabs.getSelected().index == 2){
      this.paymentTabs.select(2);
      this.slides.slideTo(2);
    }
  }

I hope this can help you

1 Like