Ionic 4 Hide/Show Header Directive Animation LAGS while scrolling

March 6, 2020, 7:15 am

≫ Next: Ionic4 - Cannot find module - $_lazy_route_resource lazy namespace

Hello everyone, I hope you all doing well :smiley: ,

I have been looking and searching for a good way to hide and show header on ionic 4 project while scrolling.
I have achieved that by the help of others on form and by doing some search, but what I am having issue now is that it is so laggy, like it flickrs and something like that when it hides/shows.

For this i have used a directive.
Here is my ionic info:

Ionic:

   Ionic CLI                     : 5.4.9 (C:\Users\Milot\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.9.1
   @angular-devkit/build-angular : 0.803.23
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 10 other plugins)

Utility:

   cordova-res : 0.8.1 (update available: 0.9.0)
   native-run  : 0.2.9 (update available: 0.3.0)

System:

   Android SDK Tools : 26.1.1 (C:\Users\Milot\AppData\Local\Android\Sdk)
   NodeJS            : v13.2.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.1
   OS                : Windows 10

And this is how i have used the directive:

import { Directive, Input, ElementRef, Renderer2, OnInit } from "@angular/core";
import { DomController } from "@ionic/angular";

@Directive({
  selector: "[myScrollVanish]"
})
export class ScrollVanishDirective implements OnInit {
  @Input("myScrollVanish") scrollArea;

  private hidden: boolean = false;
  private triggerDistance: number = 1;

  constructor(
    private element: ElementRef,
    private renderer: Renderer2,
    private domCtrl: DomController
  ) {}

  ngOnInit() {
    this.initStyles();

    this.scrollArea.ionScroll.subscribe(scrollEvent => {
      let delta = scrollEvent.detail.deltaY;

      if (scrollEvent.detail.currentY === 0 && this.hidden) {
        this.show();
      } else if (!this.hidden && delta > this.triggerDistance) {
        this.hide();
      } else if (this.hidden && delta < -this.triggerDistance) {
        this.show();
      }
    });
  }

  initStyles() {
    this.domCtrl.write(() => {
      this.renderer.setStyle(
        this.element.nativeElement,
        "transition",
        "0.1s linear"
      );
      this.renderer.setStyle(this.element.nativeElement, "height", "52px");
    });
  }

  hide() {
    this.domCtrl.write(() => {
    //   this.renderer.setStyle(this.element.nativeElement, "min-height", "0px");
      this.renderer.setStyle(this.element.nativeElement, "height", "0px");
    //   this.renderer.setStyle(this.element.nativeElement, "opacity", "0");
    //   this.renderer.setStyle(this.element.nativeElement, "padding", "0");
    });

    this.hidden = true;
  }

  show() {
    this.domCtrl.write(() => {
      this.renderer.setStyle(this.element.nativeElement, "height", "52px");
    //   this.renderer.removeStyle(this.element.nativeElement, "opacity");
    //   this.renderer.removeStyle(this.element.nativeElement, "min-height");
    //   this.renderer.removeStyle(this.element.nativeElement, "padding");
    });

    this.hidden = false;
  }
}

html file:

<ion-header>
  <ion-toolbar [myScrollVanish]="scrollArea">
  </ion-toolbar >
</ion-header>
<ion-content #scrollArea scrollEvents="true"> ... </ion-content>

and here is a video of it, first time its with 0.1s linear and second time is with 0.5s linear:
Click here for Stramable Video

i have tried these but with same results:
Link 1
Link 2
Link 3

thank you very much,

All the best,

Milot.

Posts: 1

Participants: 1