chore(components): header portal adjust microanimation for megamenu openclose

.changeset/young-states-teach.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Updated the Header to use the new dissolve animation.

packages/components/cypress/e2e/header.cy.ts

@@ -116,7 +116,7 @@ describe('header', () => {
       // Check if animation class is present
       cy.get('post-megadropdown .megadropdown-container')
         .should('be.visible')
-        .should('have.class', 'slide-in');
+        .should('have.css', 'opacity', '1');
     });
 
     it('should update active class when active link changes within the same or different megadropdown', () => {

packages/components/src/animations/fade-slide.ts

@@ -0,0 +1,74 @@
+/**
+ * Used by
+ * 1. PostHeader (mobile)
+ * 2. PostMegadropdown
+ */
+
+import { CurveEasing, PresetEasing, FadeSlideOptions } from './types';
+
+const defaultOptions: FadeSlideOptions = {
+  translateY: -10,
+  duration: 300,
+  easing: 'linear',
+  fill: 'forwards',
+};
+
+function resolveEasing(easing: CurveEasing | PresetEasing): string {
+  if (typeof easing === 'string') return easing;
+  const { x1, y1, x2, y2 } = easing;
+  return `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
+}
+
+export function fadeSlideIn(el: Element, options: FadeSlideOptions = {}): Animation {
+  if (!el) return;
+
+  const { translateY, duration, easing, fill } = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  return el.animate(
+    [
+      {
+        opacity: '0',
+        transform: `translateY(${translateY}px)`,
+      },
+      {
+        opacity: '1',
+        transform: 'translateY(0px)',
+      },
+    ],
+    {
+      duration: duration,
+      easing: resolveEasing(easing),
+      fill: fill,
+    },
+  );
+}
+
+export function fadeSlideOut(el: Element, options: FadeSlideOptions): Animation {
+  if (!el) return;
+
+  const { translateY, duration, easing, fill } = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  return el.animate(
+    [
+      {
+        opacity: '1',
+        transform: 'translateY(0)',
+      },
+      {
+        opacity: '0',
+        transform: `translateY(${translateY}px)`,
+      },
+    ],
+    {
+      duration: duration,
+      easing: resolveEasing(easing),
+      fill: fill,
+    },
+  );
+}

packages/components/src/animations/index.ts

@@ -1 +1,3 @@
 export * from './fade';
+export * from './slide';
+export * from './fade-slide';

packages/components/src/animations/slide.ts

@@ -1,31 +1,39 @@
-const easing: string = 'ease';
-const duration: number = 500;
-const fill: FillMode = 'forwards';
+/**
+ * Used by PostMegadropdown
+ */
 
-export function slideUp(el: HTMLElement, translateSize: string = '-100%'): Animation {
-  return el.animate(
-    [
-      { transform: 'translateY(0)' }, // Starting position (no translation)
-      { transform: `translateY(${translateSize})` }, // End position
-    ],
-    {
-      duration: duration,
-      easing,
-      fill,
-    },
-  );
+import { SlideOptions } from './types';
+
+// Global defaults
+const defaultSlideOptions: SlideOptions = {
+  translateX: 100,
+  duration: 500,
+  easing: 'ease',
+  fill: 'forwards',
+};
+
+export function slideIn(el: HTMLElement, options: SlideOptions = {}): Animation {
+  const { translateX, duration, easing, fill } = {
+    ...defaultSlideOptions,
+    ...options,
+  };
+
+  return el.animate([{ transform: `translateX(${translateX}%)` }, { transform: 'translateX(0)' }], {
+    duration,
+    easing,
+    fill,
+  });
 }
 
-export function slideDown(el: HTMLElement, translateSize: string = '-100%'): Animation {
-  return el.animate(
-    [
-      { transform: `translateY(${translateSize})` }, // Starting position (no translation)
-      { transform: 'translateY(0)' }, // End position
-    ],
-    {
-      duration: duration,
-      easing,
-      fill,
-    },
-  );
+export function slideOut(el: HTMLElement, options: SlideOptions = {}): Animation {
+  const { translateX, duration, easing, fill } = {
+    ...defaultSlideOptions,
+    ...options,
+  };
+
+  return el.animate([{ transform: 'translateX(0)' }, { transform: `translateX(${translateX}%)` }], {
+    duration,
+    easing,
+    fill,
+  });
 }

packages/components/src/animations/types.ts

@@ -0,0 +1,22 @@
+export type CurveEasing = {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+};
+
+export type PresetEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+
+export interface FadeSlideOptions {
+  translateY?: number;
+  duration?: number;
+  easing?: CurveEasing | PresetEasing;
+  fill?: FillMode;
+}
+
+export interface SlideOptions {
+  translateX?: number;
+  duration?: number;
+  easing?: string;
+  fill?: FillMode;
+}

packages/components/src/components/post-header/post-header.tsx

@@ -3,9 +3,10 @@ import { throttle } from 'throttle-debounce';
 import { version } from '@root/package.json';
 import { SwitchVariant } from '@/components';
 import { breakpoint, Device } from '@/utils/breakpoints';
-import { slideDown, slideUp } from '@/animations/slide';
+import { fadeSlideIn, fadeSlideOut } from '@/animations';
 import { getFocusableChildren } from '@/utils/get-focusable-children';
 import { EventFrom } from '@/utils/event-from';
+import { FadeSlideOptions } from '@/animations/types';
 
 /**
  * @slot post-logo - Should be used together with the `<post-logo>` component.
@@ -39,6 +40,17 @@ export class PostHeader {
     return this.device !== 'desktop' && this.hasNavigation;
   }
 
+  private animationOptions: FadeSlideOptions = {
+    translateY: 0,
+    duration: 350,
+    easing: {
+      x1: 0.8,
+      y1: 0.2,
+      x2: 0.8,
+      y2: 0.7,
+    },
+  };
+
   get scrollParent(): HTMLElement {
     const frozenScrollParent: HTMLElement | null = document.querySelector(
       '[data-post-scroll-locked]',
@@ -189,8 +201,8 @@ export class PostHeader {
   async toggleBurgerMenu(force?: boolean) {
     if (this.device === 'desktop') return;
     this.burgerMenuAnimation = this.burgerMenuExtended
-      ? slideUp(this.burgerMenu)
-      : slideDown(this.burgerMenu);
+      ? fadeSlideOut(this.burgerMenu, this.animationOptions)
+      : fadeSlideIn(this.burgerMenu, this.animationOptions);
 
     // Update the state of the toggle button
     const menuButton = this.host.querySelector<HTMLPostTogglebuttonElement>('post-togglebutton');
@@ -222,7 +234,9 @@ export class PostHeader {
   private getFocusableElements() {
     // Get elements in the correct order (different as the DOM order)
     const focusableEls = [
-      ...Array.from(this.host.querySelectorAll('.list-inline:not([slot="global-nav-secondary"]) > li')),
+      ...Array.from(
+        this.host.querySelectorAll('.list-inline:not([slot="global-nav-secondary"]) > li'),
+      ),
       ...Array.from(
         this.host.querySelectorAll(
           'nav > post-list > div > post-list-item, post-megadropdown-trigger',

packages/components/src/components/post-megadropdown/post-megadropdown.scss

@@ -4,42 +4,6 @@
 @use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
 @use '@swisspost/design-system-styles/mixins/utilities';
 
-@keyframes slide-in {
-  0% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(0%);
-  }
-}
-
-@keyframes slide-out {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes slide-down {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-
-@keyframes slide-up {
-  0% {
-    transform: translateY(0%);
-  }
-  100% {
-    transform: translateY(-100%);
-  }
-}
-
 *,
 ::before,
 ::after {
@@ -60,14 +24,6 @@
     border-block-end: 1px solid CanvasText;
   }
 
-  &.slide-in {
-    animation: slide-down 350ms forwards;
-  }
-
-  &.slide-out {
-    animation: slide-up 350ms forwards;
-  }
-
   @include media.max(lg) {
     z-index: 1;
     position: absolute;
@@ -80,14 +36,6 @@
     border-block-start: unset;
     overflow-y: auto;
     overscroll-behavior: contain;
-
-    &.slide-in {
-      animation: slide-in 350ms forwards;
-    }
-
-    &.slide-out {
-      animation: slide-out 350ms forwards;
-    }
   }
 
   @include media.min(lg) {