Hi,
I wanted a fade effect on transitions in my app. When I tried putting it in it wouldn’t work so I started from the side menu template. But still I can’t get it to work, I think I did everything correct. Is this still supported in ionic 3 ?
First I installed the plugin
$ ionic cordova plugin add com.telerik.plugins.nativepagetransitions
$ npm install --save @ionic-native/native-page-transitions
I imported and included it in the providers
app.module.ts:
import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions';
&
providers: [
StatusBar,
SplashScreen,
NativePageTransitions,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Then I imported and used the functions on a button click event.
home.ts:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ListPage } from '../list/list';
import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, private nativePageTransitions: NativePageTransitions) {
}
test(){
var options = {
"duration" : 500,
"androiddelay" : 0,
"iosdelay" : 0,
"href" : null
};
this.nativePageTransitions.fade(options);
this.navCtrl.push(ListPage);
}
}
The button:
`home.html:
<button ion-button (click)="test()">test</button>`
I tried in both the lab and emulator and they all give me the standard slide effect. Will this only show on real devices or am I missing something?
Have a great day,
Update - tested on device, not working either.
I actually tested it out last week and it worked perfectly. What’s the href option supposed to be doing, because I can’t recollect have seeing that in the documentation? It should only work on a device, so testing in lab shouldn’t work. Are you seeing any errors in the log on your device? Btw, make a habit of using let instead of var. It will make your code less error prone since it has better block-scoping capabilities.
1 Like
I found the options I used in one of the demos in the github repo… I replaced it by this now:
let options = {
"duration" : 500,
"androiddelay" : 0,
"iosdelay" : 0
};
But still I can’t get it to work…
I made a public repo for the test project here:
extra info:
global packages:
@ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0
local packages:
@ionic/app-scripts : 1.3.7
@ionic/cli-plugin-cordova : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms : ios 4.4.0
Ionic Framework : ionic-angular 3.4.0
System:
Node : v6.9.5
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
ios-sim : not installed
npm : 3.10.10
Update - tried installing it on a blank ionic template with an extra page that gets linked to with a click event.
I found some old articles talking about adapters you needed to install but I don’t think this is still the case normally ? What am I missing here
Did you attach any handlers to catch success/error?
this.nativePageTransitions.fade(options)
.then(onSuccess)
.catch(onError);
I’m curious whether the plugin isn’t firing or it’s just errorring silently.
using this:
navTo(){
let options = {
"duration" : 500,
"androiddelay" : 0,
"iosdelay" : 0
};
this.nativePageTransitions.fade(options).then(this.onSuccess).catch(this.onError);;
this.navCtrl.push(SecondPage);
}
onSuccess(){
alert('success');
}
onError(){
alert('error');
}
It navigates me to the next page with a slide animation alerting success …
pieterjanDB:
options
Hmm and what about using another native transition then slide? On what device are you testing?
neomib
June 16, 2017, 12:47pm
9
Are u seeing any errors in the Dev Tools?
@luukschoen
I am trying to use the fade instead of the slide… ( nativePageTransitions.fade )
@neomib
No errors anywhere that I can see
I meant using another transition then fade
I also tried slides with other directions (up) but it’s always the standard transition showing. Did you do exactly the same steps I did to make it work or did I forget some import/declaration ?
SOLVED-
@mhartington made me a demo to do a fade transition
Nice! Maybe care to explain the example? Seems empty to me, at least I don’t see any transitions.
Its all in the app.module.ts, he wrote a fadetransition that extends PageTransition then he added it to the config and selected in @NgModule ->imports
[
BrowserModule,
IonicModule.forRoot(MyApp, {
pageTransition: 'fade'
})
]
export class AppModule {
constructor(config: Config) {
config.setTransition('fade', FadeTansition);
}
}
const SHOW_BACK_BTN_CSS = 'show-back-button';
export class FadeTansition extends PageTransition {
init() {
super.init();
const plt = this.plt;
const enteringView = this.enteringView;
const leavingView = this.leavingView;
const opts = this.opts;
// what direction is the transition going
const backDirection = opts.direction === 'back';
if (enteringView) {
if (backDirection) {
this.duration(200);
} else {
this.duration(200);
this.enteringPage.fromTo('opacity', 0, 1, true);
}
if (enteringView.hasNavbar()) {
const enteringPageEle: Element = enteringView.pageRef().nativeElement;
const enteringNavbarEle: Element = enteringPageEle.querySelector(
'ion-navbar'
);
const enteringNavBar = new Animation(plt, enteringNavbarEle);
this.add(enteringNavBar);
const enteringBackButton = new Animation(
plt,
enteringNavbarEle.querySelector('.back-button')
);
this.add(enteringBackButton);
if (enteringView.enableBack()) {
enteringBackButton.beforeAddClass(SHOW_BACK_BTN_CSS);
} else {
enteringBackButton.beforeRemoveClass(SHOW_BACK_BTN_CSS);
}
}
}
// setup leaving view
if (leavingView && backDirection) {
// leaving content
this.duration(200);
const leavingPage = new Animation(plt, leavingView.pageRef());
this.add(leavingPage.fromTo('opacity', 1, 0));
}
}
}
1 Like
Awesome. If this is the best way to do it, perhaps we should extend the docs @mhartington ?
I think they are planning on doing that, he told me animations are not very well documented at the moment.
1 Like
sertal
February 1, 2018, 9:53am
18
To get native-page-transitions plugin working with Ionic 3 I found it is required to disable animation when calling NavController push(), as in the following example:
let pageTransOpts: NativeTransitionOptions = {
duration: 500,
iosdelay: 50,
androiddelay: 100
};
this.nativePageTrans.fade(pageTransOpts)
this.navCtrl.push(SecondPage, null, {animate: false});
1 Like
@sertal Your answer worked for me! THANKS!
This (on IonicModule.forRoot) doesn’t seem to be available in Ionic 4 (beta 8). And the fade transition in iOS (with @ionic-native/native-page-transitions) doesn’t appear to work.
none of them are working?