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
Top comments (0)