This content originally appeared on DEV Community and was authored by timsar2
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
This content originally appeared on DEV Community and was authored by timsar2
timsar2 | Sciencx (2021-09-22T21:04:43+00:00) Custom Ionic Animation On Page Transition. Retrieved from https://www.scien.cx/2021/09/22/custom-ionic-animation-on-page-transition/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.