Ionic-framework: How use custom page transitions?

[NoNameProvided]

Short description of the problem:

We need custom page transitions for our application. The same as now are used for modals. (sliding up from bottom when opening, sliding down when closed) I have digged into the page transitions part of the framework, but I was not able to make a working custom page transition.

I see there was some rewrite of transitions recently. Can one of you provide some information about how can I create custom page transformations?

Edit: I am able to add page transitions with copy pasting a generated page transition file from ionic-angular/transitions/transition-xy.js. Renaming it, editing it then registering it in ionic-angular/index.js like this does the trick:

require('./transitions/transition-ios');
require('./transitions/transition-md');
require('./transitions/transition-wp');
require('./transitions/transition-custom');

But playing around with generated files in node modules folder is not a good idea. In index.js I see that page transition related classes are not exported with __export. Is there a particular reason for that?

What behavior are you expecting?

I can add custom page transitions as it was developed to be extendable.

Other information: N/A

Which Ionic Version? 2.x

Plunker that shows an example of your issue: N/A

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.3.1
Gulp version:  CLI version 1.2.2
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v6.3.1
Xcode version: Xcode 8.0 Build version 8A218a 

[ramonornela]

Added feature in https://github.com/driftyco/ionic/commit/7c05d0c0ba7cff42e358d9648b1a7eb255d7aa37 beta.12 close issue.

[NoNameProvided]

@jgw96 This can be closed, now in RC.0 custom transitions can be registered easily.

For the ones who comes here from Google, this is how you do it:

You extend the PageTransition class. For example this is a custom fade transition:

import { Animation } from 'ionic-angular/animations/animation';
import { isPresent } from 'ionic-angular/util/util';
import { PageTransition } from 'ionic-angular/transitions/page-transition';

const DURATION = 500;
const OPACITY = 'opacity';
const TRANSPARENT = 0;
const OPAQUE = 1;


export class FadeTransition extends PageTransition {

  init() {
    super.init();

    const enteringView = this.enteringView;
    const leavingView = this.leavingView;
    const opts = this.opts;

    this.duration(isPresent(opts.duration) ? opts.duration : DURATION);

    const backDirection = (opts.direction === 'back');

    if (enteringView) {
      const enteringPageEle: Element = enteringView.pageRef().nativeElement;

      const enteringContent = new Animation(enteringView.pageRef());
      this.add(enteringContent);

      if (backDirection) {
        enteringContent
          .fromTo(OPACITY, OPAQUE, OPAQUE, true);
      } else {
        enteringContent
          .fromTo(OPACITY, TRANSPARENT, OPAQUE, true);
      }

    }

    if (leavingView && leavingView.pageRef()) {
      const leavingPageEle: Element = leavingView.pageRef().nativeElement;

      const leavingContent = new Animation(leavingView.pageRef());
      this.add(leavingContent);

      if (backDirection) {
        leavingContent
          .fromTo(OPACITY, OPAQUE, TRANSPARENT, false);
      } else {
        leavingContent
          .fromTo(OPACITY, OPAQUE, OPAQUE, false);
      }

    }
  }

}

The most esier way to copy an existing transition and modify it for your needs. After that you have to modify your app.module.ts file to register the transition like this:

this.config.setTransition('fade-transition', FadeTransition);

And now you can use your custom transition with passing an option object to any navigation method like:

this.nav.push(MyPage, null, { animation: 'fade-transition', direction: 'forward' });

[aentan]

@NoNameProvided Works great except the pushed page doesn't show the back button. Help!

EDIT: Just found out that the appearing of back button is handled by the transition. There is a transition for ios, md and wp. How can I write my custom transition so the entering page behaves correctly and show the back button and navbar for each platform?

[NoNameProvided]

It should work, are you sure that you have pages on the stack? E.g if you push with setroot then you won't have any back button.

[aentan]

I'm just adding the animation option to my navpush. The back button was showing before.

Anyway I inspected the DOM. Back button's there. Just hidden. I looked at ionic's transtions, it seems the showing of back button is handled within the transition. Each platform animations the back button differently as part of the push animation.

[janein]

hi @NoNameProvided!
I just stumbled upon your topic and this is exactly what I wanted to do.
But as I've implemented it, I get some errors in the transition.

On this line:
const enteringContent = new Animation(enteringView.pageRef());

I get these errors:

Argument of type 'ElementRef' is not assignable to parameter of type 'Platform'.
Property '_win' is missing in type 'ElementRef'.

Do you by any chance have a version which works with RC4?

thanks for your effort!
janein

[NoNameProvided]

Hey @janein, I haven't updated that project to the latest ionic yet, so I dont know why this error happening. Sadly I have no time to do this now, but when I will, I will share the new version here.

[baskin]

@janein use the following instead with [email protected]
const enteringContent = new Animation(this.plt, enteringView.pageRef());

[franzisk]

How to animate pages in tabs? Entering and leaving?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.