Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

September 22, 2021 09:04 pm GMT

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

Original Link: https://dev.to/timsar2/custom-ionic-animation-on-routing-4i21

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To