SOLVED - fade page transition

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,
Pieter-Jan

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 don’t get any errors when inspecting the app running on a device either.

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.
Same result.

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

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 …

Hmm and what about using another native transition then slide? On what device are you testing?

Are u seeing any errors in the Dev Tools?

@luukschoen

I am trying to use the fade instead of the slide… ( nativePageTransitions.fade )
Tested on iphone 5s and iphone 6s.

@neomib

No errors anywhere that I can see :confused: ( xcode and safari inspect is what I checked )

I meant using another transition then fade :slight_smile: none of them are working?

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

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.