Hi to all!
Guys I am struggling to figure out how to use the NativePageTransitions plugin from telerik. I am not sure where to put the code from ionic’s documentation.
Does it work in conjunction with NavControlller? How can I programatically set a transition between pages? Not only at a global level. From NativePageTransitions docs it has an option to pass an href for navigating between pages but Ionic 2 NavController use the page class component instead of an href.
Thank you in advance
ok, I just figured it out. Here is my solution.
You want to navigate from page A to page B
in page A let’s we have a button that triggers the navigation with a click event: gotToPageB()
goToPageB() {
// push method accepts three arguments. The last argument is the NavOptions
// Set the animate property to false to disable ionic's transition
this.nav.push(TabsPage,{},{animate:false});
}
Now on page B controller. There we have some lifecycle events regarding this page. You can read about them in the NacController docs. I choose the ionViewDidLoad() event. Other event might be a better one but let’s stick to this one. In this method we can implement the transition. Let’s say a fade transition
ionViewDidLoad() {
let options: TransitionOptions = {
"duration" : 400, // in milliseconds (ms), default 400
"iosdelay" : 60, // ms to wait for the iOS webview to update before animation kicks in, default 60
"androiddelay" : 100
};
NativePageTransitions.fade(options)
.then((data) => {
})
.catch((err) => {
});
}
}
And you sdhould be good to go. Don’t forget to import the plugin dependencies in the page B
import {NativePageTransitions, TransitionOptions} from 'ionic-native';Hi Dianikol
I tried your solution but I am still not able to see the transition happening, I am getting an error message “plugin is not installed” and I have installed the plugin in my project, even I create a new project from scratch to just test the transition but getting same error “Plugin is not installed”.
Would you be able to share or have time to create small codepen to demonstrate the working example? That would be a great help.
Cheers,
Garry
I’ll create a github repo asap and i’ll post the link here.
Really appreciate your help. Awaiting desperately
Cheers
Here is a basic demo for each transition. It will run a lot smoother on a device than in a simulator
https://github.com/dianikol/ionic2-native-page-transition-telerik
Thank you so much, for making this. I was testing my app in ionic view. I will try and build for native ios and will let you know the results.
As far as I understand, the plugin works by creating a screenshot of the current view and shows it while executing the actual page transition. After the transition is executed the screenshot is faded/slided/etc away and the new page is visible. So calling the plugin after the page is loaded is kind of… not right. IMHO.
The plugin works perfectly with Ionic2 but there is a bug that it triggers the keyboard to open/close generating a flicker.
So actually its a “no go” for production use.
Its ok if you don’t have forms elements 
hi there, I tried your example but its not working properly
.ts:
// tab component
click(){
this.navCtrl.push('TestComp', {}, {animate: false});
}
// Transition to this page
ionViewWillLoad() {
let options: NativeTransitionOptions = {
"direction" : "left", // 'left|right|up|down', default 'left' (which is like 'next')
"duration" : 400, // in milliseconds (ms), default 400
"slowdownfactor" : 3, // overlap views (higher number is more) or no overlap (1). -1 doesn't slide at all. Default 4
"slidePixels" : 20, // optional, works nice with slowdownfactor -1 to create a 'material design'-like effect. Default not set so it slides the entire page.
"iosdelay" : 100, // ms to wait for the iOS webview to update before animation kicks in, default 60
"androiddelay" : 150, // same as above but for Android, default 70
"fixedPixelsTop" : 0, // the number of pixels of your fixed header, default 0 (iOS and Android)
"fixedPixelsBottom": 0 // the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android)
};
this.nativePageTransitions.slide(options)
.then( (msg) => console.log(msg) )
.catch( (err) => console.log(err));
}
ionViewWillLeave() {
let options: NativeTransitionOptions = {
"direction" : "right", // 'left|right|up|down', default 'left' (which is like 'next')
"duration" : 400, // in milliseconds (ms), default 400
"slowdownfactor" : 3, // overlap views (higher number is more) or no overlap (1). -1 doesn't slide at all. Default 4
"slidePixels" : 20, // optional, works nice with slowdownfactor -1 to create a 'material design'-like effect. Default not set so it slides the entire page.
"iosdelay" : 100, // ms to wait for the iOS webview to update before animation kicks in, default 60
"androiddelay" : 150, // same as above but for Android, default 70
"fixedPixelsTop" : 0, // the number of pixels of your fixed header, default 0 (iOS and Android)
"fixedPixelsBottom": 0 // the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android)
};
this.nativePageTransitions.slide(options)
.then( (msg) => console.log(msg) )
.catch( (err) => console.log(err));
}
When I click on the button…the next page appears momentarily then disappears (leaving blank page) and then it transitions… and when leaving no animation at all (the page just disappears and ionViewWillLeave doesn’t animate properly)