Page Transition Animation in Ionic 2

user_7739150 0
Viewed 5656

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

ionic2 ionic3 angular typescript animation
2 Answers

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

user_71301210
Related