Custom Ionic Animation On Page Transition

Hello,
We want to make animation for ion-content and prevent the ion-header to be animated

let do it fast :D

Create a Directive Module

ionic generate module directive

ionic generate directive page-animation --module directive

This is PageAnimationDirective :

import { Directive, ElementRef } from '@angular/core';
import { createAnimation  } from '@ionic/core';
import { AnimationController } from '@ionic/angular';

@Directive({
  selector: '[appPageAnimation]'
})
export class PageAnimationDirective {

  constructor(private animationCtrl: AnimationController, private el: ElementRef) {
    this.dropIn();
  }

  private dropIn() {
    const animation = createAnimation()
              .addElement(this.el.nativeElement)
              .duration(500)
              .iterations(1)
              .fromTo('transform', 'translateY(-10%)', 'translateY(0%)');
    animation.play();
  }
}

Export PageAnimationDirective from DirectiveModule:

@NgModule({
  declarations: [PageAnimationDirective],
  imports: [
    CommonModule
  ],
  exports: [PageAnimationDirective]
})
export class DirectiveModule { }

Import DirectiveModule to Component.Module.ts of each component you want to be animated like this:

@NgModule({
  imports: [FormsModule, DirectiveModule],
  declarations: [FolderPage]
})

From you component.html add appPageAnimation directive to ion-content:

<ion-content [fullscreen]="true" appPageAnimation>

To Prevent ion-header, tabs, etc.. to be animated on page transition, make animate flag to false from app.module:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    IonicModule.forRoot({ animated: false  }),
    ...
}

Enjoy It :D

Blog

Custom Ionic Animation On Page Transition

timsar2

let do it fast :D

Join Our Newsletter. No Spam, Only the good stuff.

Related