Native CSS animation instead of @angular/animations #11561

Author: PowerKiKi

client/app/front-office/components/menu/menu.component.html

@@ -1,4 +1,4 @@
-<div class="mega-menu mat-elevation-z4" role="menu" [@transformMenu]="panelAnimationState">
+<div class="mega-menu mat-elevation-z4" role="menu">
     <div class="mega-menu-content" [style.min-height.px]="data.contentHeight" [style.padding-left.px]="offsetLeft">
         <ng-container *ngTemplateOutlet="navigationTemplate; context: {$implicit: data.items}" />
     </div>

client/app/front-office/components/menu/menu.component.scss

@@ -1,3 +1,15 @@
+@keyframes _mat-menu-enter {
+    from {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+
+    to {
+        transform: none;
+        opacity: 1;
+    }
+}
+
 :host {
     display: flex;
     flex: 1;
@@ -6,6 +18,7 @@
 .mega-menu {
     display: block;
     flex: 1;
+    animation: _mat-menu-enter 120ms cubic-bezier(0, 0, 0.2, 1);
     border-radius: 5px;
     background: white;
     padding-top: 15px;

client/app/front-office/components/menu/menu.component.ts

@@ -1,4 +1,3 @@
-import {animate, group, query, sequence, state, style, transition, trigger} from '@angular/animations';
 import {ChangeDetectionStrategy, Component, inject, InjectionToken} from '@angular/core';
 import {MenuItem} from '../../services/navigation.service';
 import {RouterLink, RouterLinkActive} from '@angular/router';
@@ -18,26 +17,6 @@ export const APP_MENU_DATA = new InjectionToken<MenuDropdownData>('MenuDropdownD
     styleUrl: './menu.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush,
     preserveWhitespaces: false,
-    animations: [
-        trigger('transformMenu', [
-            state('void', style({opacity: 0, transform: 'scale(0.01, 0.01)'})),
-            transition(
-                'void => enter',
-                sequence([
-                    query('.mega-menu-content', style({opacity: 0})),
-                    animate('100ms linear', style({opacity: 1, transform: 'scale(1, 0.5)'})),
-                    group([
-                        query(
-                            '.mega-menu-content',
-                            animate('402ms cubic-bezier(0.55, 0, 0.55, 0.2)', style({opacity: 1})),
-                        ),
-                        animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({transform: 'scale(1, 1)'})),
-                    ]),
-                ]),
-            ),
-            transition('* => void', animate('150ms 50ms linear', style({opacity: 0}))),
-        ]),
-    ],
     imports: [CommonModule, RouterLinkActive, RouterLink],
 })
 export class MenuComponent {
@@ -48,21 +27,12 @@ export class MenuComponent {
      */
     public offsetLeft = 0;
 
-    /**
-     * Current state of the panel animation.
-     */
-    public panelAnimationState: 'void' | 'enter' = 'void';
-
     public constructor() {
         const data = this.data;
 
         this.offsetLeft = data.originalNativeElement.offsetLeft - 20;
     }
 
-    public startAnimation(): void {
-        this.panelAnimationState = 'enter';
-    }
-
     /**
      * Toggle open parent nodes, and allow navigation only on children
      */

client/app/front-office/services/navigation.service.ts

@@ -1,7 +1,7 @@
 import {Overlay, OverlayConfig} from '@angular/cdk/overlay';
 import {ComponentPortal} from '@angular/cdk/portal';
 import {DOCUMENT} from '@angular/common';
-import {ComponentRef, ElementRef, inject, Injectable, Injector, StaticProvider} from '@angular/core';
+import {ElementRef, inject, Injectable, Injector, StaticProvider} from '@angular/core';
 import {NavigationEnd, Router, RouterLink} from '@angular/router';
 import {cloneDeep} from 'lodash-es';
 import {merge, Observable, Subject} from 'rxjs';
@@ -57,16 +57,12 @@ export class NavigationService {
                 .top(offsetTop + 'px')
                 .centerHorizontally(),
             hasBackdrop: true,
-            // backdropClass: 'cdk-overlay-transparent-backdrop',
         });
 
         // Container
         const overlayRef = this.overlay.create(overlayConfig);
         const containerPortal = new ComponentPortal(MenuComponent, undefined, containerInjector);
-        const containerRef: ComponentRef<MenuComponent> = overlayRef.attach(containerPortal);
-
-        // Start animation that shows menu
-        containerRef.instance.startAnimation();
+        overlayRef.attach(containerPortal);
 
         // use subject because backdropClick() subscription don't allow two subscriptions (
         const onBackdropClick = new Subject<void>();

client/main.ts

@@ -1,7 +1,6 @@
 import {APP_ID, inject, LOCALE_ID, provideAppInitializer, provideZoneChangeDetection} from '@angular/core';
 import {AppComponent} from './app/app.component';
 import {routes} from './app/app-routing.module';
-import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
 import {bootstrapApplication} from '@angular/platform-browser';
 import {Apollo} from 'apollo-angular';
 import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material/tooltip';
@@ -40,14 +39,11 @@ const matTooltipCustomConfig: MatTooltipDefaultOptions = {
     touchGestures: 'off',
 };
 
-const prefersReducedMotion = typeof matchMedia === 'function' ? matchMedia('(prefers-reduced-motion)').matches : false;
-
 bootstrapApplication(AppComponent, {
     providers: [
         provideZoneChangeDetection({eventCoalescing: true}),
         provideNativeDateAdapter(),
         Apollo,
-        provideAnimationsAsync(prefersReducedMotion ? 'noop' : 'animations'),
         naturalProviders,
         provideErrorHandler(localConfig.log.url, LoggerExtraService),
         provideSeo({

package.json

@@ -15,7 +15,6 @@
         "codegen": "./bin/dump-schema && graphql-codegen --config codegen.ts"
     },
     "dependencies": {
-        "@angular/animations": "^19.2.13",
         "@angular/cdk": "^19.2.17",
         "@angular/common": "^19.2.13",
         "@angular/compiler": "^19.2.13",
@@ -28,8 +27,8 @@
         "@angular/router": "^19.2.13",
         "@apollo/client": "^3.13.7",
         "@ecodev/fab-speed-dial": "^18.0.0",
-        "@ecodev/natural": "^63.4.0",
-        "@ecodev/natural-editor": "^63.4.0",
+        "@ecodev/natural": "^63.5.1",
+        "@ecodev/natural-editor": "^63.5.1",
         "@ecodev/natural-layout": "^2.0.2",
         "@graphql-codegen/cli": "^5.0.5",
         "@graphql-codegen/typescript-apollo-angular": "^4.0.0",

yarn.lock

@@ -202,13 +202,6 @@
   dependencies:
     "@angular-eslint/bundled-angular-compiler" "19.3.0"
 
-"@angular/animations@^19.2.13":
-  version "19.2.13"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-19.2.13.tgz#8df70342e29a51b85ed1a15c716240b004e4b906"
-  integrity sha512-x9LYcSndY9BdwuRxTx0gXvlLrvJyzjnWoaIoVLrAZWZbKfQh2+HK4XkclbzNvn8RMeoBpZZatcC3ZBC1TffjtA==
-  dependencies:
-    tslib "^2.3.0"
-
 "@angular/build@19.2.13":
   version "19.2.13"
   resolved "https://registry.yarnpkg.com/@angular/build/-/build-19.2.13.tgz#0b9dc22ba303ce29ec45fadd3ff60a651c588614"
@@ -1333,10 +1326,10 @@
   dependencies:
     tslib "^2.8.1"
 
-"@ecodev/natural-editor@^63.4.0":
-  version "63.4.0"
-  resolved "https://registry.yarnpkg.com/@ecodev/natural-editor/-/natural-editor-63.4.0.tgz#16eff30e9ac8642f4909a2c3fbd497da26867ee3"
-  integrity sha512-seJuku1CHNCf+SUE8CVCX1WuiEmzVKHgnGkNU+cDiBMhraZVFH0orOAcP7Umz8nAVt3A62FdgNPCWP6cWSynpw==
+"@ecodev/natural-editor@^63.5.1":
+  version "63.5.1"
+  resolved "https://registry.yarnpkg.com/@ecodev/natural-editor/-/natural-editor-63.5.1.tgz#3d7817412d7aa986765903ee92371d352f8dd65c"
+  integrity sha512-i7kstOAaDRzQ3JAtvUU3oXSK/tkuGQz1w2r24k8P44ltcPXz6fFAIAa4FmkcQcpXC8yP58gJ+T9e/ft/N0jwFA==
   dependencies:
     prosemirror-commands "^1.5.2"
     prosemirror-dropcursor "^1.8.1"
@@ -1358,10 +1351,10 @@
   resolved "https://registry.yarnpkg.com/@ecodev/natural-layout/-/natural-layout-2.0.2.tgz#e2c64c2ddb3c60793a39236b52624fde323e610a"
   integrity sha512-BV75kFQmpfuSBNQ1jyKu+IdGkFTMESjPrtKrEyc3MqcmVhV5IiYU0LXTaghLZozuZgCT9HfMOnEsh05aS2j9uQ==
 
-"@ecodev/natural@^63.4.0":
-  version "63.4.0"
-  resolved "https://registry.yarnpkg.com/@ecodev/natural/-/natural-63.4.0.tgz#efa100f8de9d68fa9411cb79cf5786d19adc9fc4"
-  integrity sha512-0ux68Dxi1IJD42ShzIbWSOoFD/aY49z9VunDYFBzJCUSAQ4BGawhJR1aQX+9xbJHqx8rs5zmhyAI3QFCUJjnvg==
+"@ecodev/natural@^63.5.1":
+  version "63.5.1"
+  resolved "https://registry.yarnpkg.com/@ecodev/natural/-/natural-63.5.1.tgz#d7bcedbd91daad69fc03fccc8d3f7689a33ed85b"
+  integrity sha512-F3KIqRkksf4wv4M6nKqjolYwyW24hkcsthZn4C3yUyiKQVZ7zWGhXpeLfzjLDl10rbtpDnV0+vmcGJ/BL15W6Q==
   dependencies:
     extract-files "^13.0.0"
     tslib "^2.8.1"