fix(tab-bar): update position and animation based on requirements

Author: joselrio

core/src/components/tab-bar/tab-bar.ionic.scss

@@ -94,15 +94,13 @@
 // --------------------------------------------------
 
 :host(.tab-bar-hide-on-scroll) {
-  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 :host(.tab-bar-scroll-hidden) {
-  transform: translateY(calc(100% + var(--ion-safe-area-bottom, 0))) translateX(calc(-50%));
+  transform: translateY(calc(100% + var(--ion-safe-area-bottom, 0) + globals.$ion-space-1000)) translateX(calc(-50%));
 
-  transition: transform 0.3s cubic-bezier(0.3, 1, 0.1, 1), opacity 0.3s cubic-bezier(0.3, 1, 0.1, 1);
-
-  opacity: 0;
+  transition: transform 0.35s cubic-bezier(0.3, 1, 0.1, 1);
 }
 
 :host([slot="top"].tab-bar-scroll-hidden) {

core/src/components/tab-bar/tab-bar.tsx

@@ -190,26 +190,15 @@ export class TabBar implements ComponentInterface {
   private async initScrollListener(contentEl: HTMLElement) {
     const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
 
-    const scrollThreshold = 10;
-
     this.contentScrollCallback = () => {
       readTask(() => {
         const scrollTop = scrollEl.scrollTop;
-        const isScrollingDown = scrollTop > this.lastScrollTop;
-
-        if (isScrollingDown !== this.lastScrollTop > this.scrollDirectionChangeTop) {
-          this.scrollDirectionChangeTop = this.lastScrollTop;
-        }
-
-        const delta = Math.abs(scrollTop - this.scrollDirectionChangeTop);
+        const shouldHide = this.checkScrollStatus(scrollTop);
 
-        if (delta >= scrollThreshold) {
-          const shouldHide = isScrollingDown && scrollTop > 0;
-          if (shouldHide !== this.scrollHidden) {
-            writeTask(() => {
-              this.scrollHidden = shouldHide;
-            });
-          }
+        if (shouldHide !== this.scrollHidden) {
+          writeTask(() => {
+            this.scrollHidden = shouldHide;
+          });
         }
 
         this.lastScrollTop = scrollTop;
@@ -226,6 +215,33 @@ export class TabBar implements ComponentInterface {
     }
   }
 
+  private checkScrollStatus(scrollTop: number): boolean {
+    // Always visible within the first 80px of scroll
+    const visibleZone = 80;
+    // Hides after 60px of continuous downward scrolling only, when scrolling up threashold should be 0px
+    const scrollThresholdHide = 60;
+
+    if (scrollTop <= visibleZone) {
+      return false;
+    }
+
+    const isScrollingDown = scrollTop > this.lastScrollTop;
+    const wasScrollingDown = this.lastScrollTop > this.scrollDirectionChangeTop;
+
+    if (isScrollingDown !== wasScrollingDown) {
+      this.scrollDirectionChangeTop = this.lastScrollTop;
+    }
+
+    const delta = Math.abs(scrollTop - this.scrollDirectionChangeTop);
+    const threshold = isScrollingDown ? scrollThresholdHide : 0;
+
+    if (delta < threshold) {
+      return this.scrollHidden;
+    }
+
+    return isScrollingDown;
+  }
+
   private getShape(): string | undefined {
     const theme = getIonTheme(this);
     const { shape } = this;