Fade out page transition

Ionic Framework ionic-v3
#1

I’ve been looking for a way to have a fade out transition on a single page in my application. This have proven more difficult than I thought.

this.navCtrl.setRoot(LoginPage, {}, {
  animate: true,
  animation: 'wp-transition',
  duration: 200
})

This snippet will actually fade it, but at the same time reduce the size of the page. Looking through the code I found this comment:

The property ‘animation’ understands the following values: md-transition, ios-transition and wp-transition.

So apparently it is not as easy as writing fade, or a small CSS animation. How can I accomplish this?

#2

Hello,

If you want to do it only in one page then you can do the animation in the ion-header and the ion-content of your page. Something like this:

<ion-content [@fadeAnimation]=" 'in' ">
...
</ion-content>

in your ts :

trigger('fadeAnimation', [
    transition('* => in', [
        style({ opacity: 0, height: '!', transform: 'translateY(-15px)' }),
        animate(300, style({ opacity: 1, transform: 'translateY(0px)' }))
    ])
]);

Hope that helps.

#3