DEV Community

timsar2
timsar2

Posted on • Edited on

Custom Ionic Animation On Page Transition

#ionic #angular #animation #directive

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

ionic animation directive

let do it fast :D

Create a Directive Module

ionic generate module directive
Enter fullscreen mode Exit fullscreen mode 
ionic generate directive page-animation --module directive
Enter fullscreen mode Exit fullscreen mode

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(); } }
Enter fullscreen mode Exit fullscreen mode

Export PageAnimationDirective from DirectiveModule:

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

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

@NgModule({ imports: [FormsModule, DirectiveModule], declarations: [FolderPage] })
Enter fullscreen mode Exit fullscreen mode

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

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

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 }), ... }
Enter fullscreen mode Exit fullscreen mode

Enjoy It :D

Top comments (0)