fix: #19367 - Drawer Regression; Flicker when clicking the close butt…

packages/primeng/src/motion/motion.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { afterRenderEffect, Component, computed, effect, inject, InjectionToken, input, output, signal } from '@angular/core';
-import { type ClassNameOptions, createMotion, type MotionEvent, type MotionInstance, type MotionOptions } from '@primeuix/motion';
+import { type ClassNameOptions, createMotion, resolveDuration, type MotionEvent, type MotionInstance, type MotionOptions, type MotionPhase } from '@primeuix/motion';
 import { nextFrame } from '@primeuix/utils';
 import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import { Bind, BindModule } from 'primeng/bind';
@@ -295,10 +295,12 @@ export class Motion extends BaseComponent<MotionPassThrough> {
                 resetStyles(this.$el, hideStrategy);
 
                 if (shouldAppear || !this.isInitialMount) {
+                    this.applyMotionDuration('enter');
                     this.motion?.enter();
                 }
             } else if (!this.isInitialMount) {
                 await nextFrame();
+                this.applyMotionDuration('leave');
                 this.motion?.leave()?.then(async () => {
                     if (this.$el && !this.cancelled && !this.visible()) {
                         applyHiddenStyles(this.$el, hideStrategy);
@@ -317,6 +319,22 @@ export class Motion extends BaseComponent<MotionPassThrough> {
         });
     }
 
+    private applyMotionDuration(phase: MotionPhase): void {
+        const options = this.motionOptions();
+        const ms = resolveDuration(options.duration, phase);
+
+        if (ms == null || !this.$el) return;
+
+        const el = this.$el as HTMLElement;
+        const durationValue = `${ms}ms`;
+
+        if (options.type === 'transition') {
+            el.style.transitionDuration = durationValue;
+        } else {
+            el.style.animationDuration = durationValue;
+        }
+    }
+
     onDestroy(): void {
         this.destroyed = true;
         this.cancelled = true;

packages/primeng/src/motion/motion.directive.ts

@@ -1,5 +1,5 @@
 import { afterRenderEffect, computed, Directive, effect, inject, InjectionToken, input, output } from '@angular/core';
-import { createMotion, type ClassNameOptions, type MotionEvent, type MotionInstance, type MotionOptions } from '@primeuix/motion';
+import { createMotion, resolveDuration, type ClassNameOptions, type MotionEvent, type MotionInstance, type MotionOptions, type MotionPhase } from '@primeuix/motion';
 import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import { applyHiddenStyles, resetStyles } from './motion.utils';
 import { MotionStyle } from './style/motion.style';
@@ -246,9 +246,11 @@ export class MotionDirective extends BaseComponent {
                 resetStyles(this.$el, hideStrategy);
 
                 if (shouldAppear || !this.isInitialMount) {
+                    this.applyMotionDuration('enter');
                     this.motion?.enter();
                 }
             } else if (!this.isInitialMount) {
+                this.applyMotionDuration('leave');
                 this.motion?.leave()?.then(() => {
                     if (this.$el && !this.cancelled && !this.visible()) {
                         applyHiddenStyles(this.$el, hideStrategy);
@@ -262,6 +264,22 @@ export class MotionDirective extends BaseComponent {
         });
     }
 
+    private applyMotionDuration(phase: MotionPhase): void {
+        const options = this.motionOptions();
+        const ms = resolveDuration(options.duration, phase);
+
+        if (ms == null || !this.$el) return;
+
+        const el = this.$el as HTMLElement;
+        const durationValue = `${ms}ms`;
+
+        if (options.type === 'transition') {
+            el.style.transitionDuration = durationValue;
+        } else {
+            el.style.animationDuration = durationValue;
+        }
+    }
+
     onDestroy(): void {
         this.destroyed = true;
         this.cancelled = true;