Animation de la transition de page dans Ionic 2

Question

J'ai une application Ionic 3 avec un modèle d'onglets simple dans laquelle je passe d'un onglet à l'autre chaque fois que l'utilisateur balaie l'écran vers la gauche ou vers la droite. Je passe d'un onglet à l'autre et tout fonctionne bien, mais il n'y a pas d'effets d'animation lorsque la transition de page se produit en tapant sur les onglets ou en balayant l'écran.

Je reçois l'animation pour la poussée et l'éclatement de la page.

this.navCtrl.push(ContactPage, {
    animation: true, direction: 'forward'
});

mais pas pour la sélection des onglets

this.navCtrl.parent.select(2,{
    animation: true, direction: 'forward'
});

Merci d'avance

Answer 1

Ce n'est actuellement pas possible avec Ionic, mais vous pouvez utiliser ce plugin extraordinaire pour parvenir à ce résultat :

Pour l'installer, il suffit de lancer

npm i --save ionic2-super-tabs

Ensuite, il faut importer SuperTabsModule.forRoot() dans le module principal de votre application

import { SuperTabsModule } from 'ionic2-super-tabs';

@NgModule({
    ...
    imports: [
      ...
      SuperTabsModule.forRoot()
      ],
    ...
})
export class AppModule {}

Maintenant que tout est prêt, vous pouvez faire quelque chose comme ceci dans votre vue :

<super-tabs>
  <super-tab [root]="page1" title="First page" icon="home"></super-tab>
  <super-tab [root]="page2" title="Second page" icon="pin"></super-tab>
  <super-tab [root]="page3" title="Third page" icon="heart"></super-tab>
</super-tabs>

Answer 2

Réponse tardive mais peut être utile pour les futurs utilisateurs. Vous pouvez réaliser une animation de transition à l'aide de ce code. Le titre et la description de cette question sont différents. Je poste donc la réponse pour le titre

goTo(page, params) {  //params are optional leave blank {} if you are not sending data
    this.navCtrl.push(page, { params: params }, { animate: true, animation: 'transition', duration: 500, direction: 'forward' });
}

goBack(){
    this.navCtrl.pop({animate:true,animation:'transition',duration:500,direction:'back'});
}

Note - Si vous êtes BackButton en Navbar faire ceci

import {ViewChild } from '@angular/core';
import { Navbar } from 'ionic-angular';  

//create global variable
@ViewChild(Navbar) navBar: Navbar;

//inside ionViewDidLoad override back button
ionViewDidLoad() {
console.log('ionViewDidLoad ProductPage');
this.navBar.backButtonClick = (e: UIEvent) => {
        // todo something
        console.log("Back Back");
        this.navCtrl.pop({animate:true,animation:'transition',duration:500,direction:'back'});
    }
}

Si vous avez besoin d'autres animations, vous pouvez Suivre cet article qui est une bonne implémentation de la transition ionique-native mais qui ne fonctionne que sur l'appareil et non sur le navigateur.