Page Transition Animation in Ionic 2

问题

I have simple tabs template Ionic 3 application in which, I am switching between the tabs whenever user swipes on view based on left or right I am switching between Tabs and All working fine accept there is no Animation effects when Page transition happens from tapping the tabs or from swiping the screen.

I am getting the Animation for page pushing and popping

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

but not for selecting Tabs

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

Thanks in advance

回答1:

That's currently not possible with Ionic, but you can use this amazing plugin to achieve something like this:

In order to install it, just run

npm i --save ionic2-super-tabs

And then import SuperTabsModule.forRoot() in your app's main module

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

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

Now everything is ready, so in your view you can do something like this:

<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>

回答2:

Late answer but may be useful for future users. You can achieve transition animation by this code. This question title & description is different. So I'm posting answer for title

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- If you are BackButton in Navbar do this

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'});
    }
}

If you need other animations you can Follow this Article which is good implementation of ionic-native transition but these only works on device not browser

来源：https://stackoverflow.com/questions/44234946/page-transition-animation-in-ionic-2

标签

angular

typescript

animation

ionic2

ionic3