Consistent Overlay Animation Properties for Menu and Calendar Components

[rahulkutah]

Describe the bug

Hi PrimeNG Team,

I would like to request a feature enhancement regarding the overlay animations for the Menu and Calendar components. Currently, there is an inconsistency in how the animations are handled during the hide transition between these two components.

Menu Component:

The enter transition includes both opacity and a transform (scaleY) effect:
transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')])

However, during the leave transition, only the opacity is animated, and the transform is omitted:
transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])

Calendar Component:

Similarly, for the Calendar, the enter transition uses both opacity and transform effects:
transition('void => visible', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}', style({ opacity: 1, transform: '*' }))])

The leave transition also only animates the opacity, even though the transform is included with a wildcard (*):
transition('visible => void', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])

Environment

prime ng version: 17.18.9
angular version: 18.1.0

Reproducer

No response

Angular version

18.1.0

PrimeNG version

17.18.9

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.15.1

Browser(s)

Chrome

Steps to reproduce the behavior

1. Popup mode for menu component
2. When calendar component overlay shows or hides

Expected behavior

Both components should include a transform animation in the hide transition, matching the enter transition for a smoother and more consistent animation, like other components which are using Overlay like Dropdown, Multiselect or Autocomplete

[rahulkutah]

Any update on this????