Overlay wrapper and element animation should start together

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -3020,8 +3020,8 @@ describe('igxOverlay', () => {
             tick();
 
             wrapperElement = (fixture.nativeElement as HTMLElement)
-                .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
-            expect(wrapperElement.style.visibility).toEqual('hidden');
+                .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0] as HTMLElement;
+                expect(wrapperElement.style.visibility).toEqual('hidden');
         }));
 
         it('Should not close the component when esc key is pressed and closeOnEsc is false', fakeAsync(() => {
@@ -3137,7 +3137,7 @@ describe('igxOverlay', () => {
             UIInteractions.triggerKeyDownEvtUponElem('Escape', document);
             tick();
             wrapperElement = (fixture.nativeElement as HTMLElement)
-                .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
+                .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0] as HTMLElement;
             expect(wrapperElement.style.visibility).toEqual('hidden');
         }));
 

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -345,7 +345,6 @@ export class IgxOverlayService implements OnDestroy {
         this.addOutsideClickListener(info);
         this.addResizeHandler();
         this.addCloseOnEscapeListener(info);
-        this.addModalClasses(info);
         this.buildAnimationPlayers(info);
         return info.id;
     }
@@ -708,6 +707,7 @@ export class IgxOverlayService implements OnDestroy {
         //  to eliminate flickering show the element just before animation start
         info.wrapperElement.style.visibility = '';
         info.visible = true;
+        this.addModalClasses(info);
         info.openAnimationPlayer.play();
     }
 
@@ -735,6 +735,7 @@ export class IgxOverlayService implements OnDestroy {
 
         this.animationStarting.emit({ id: info.id, animationPlayer: info.closeAnimationPlayer, animationType: 'close' });
         info.event = event;
+        this.removeModalClasses(info);
         info.closeAnimationPlayer.play();
     }
 
@@ -887,6 +888,14 @@ export class IgxOverlayService implements OnDestroy {
         }
     }
 
+    private removeModalClasses(info: OverlayInfo) {
+        if (info.settings.modal) {
+            const wrapperElement = info.elementRef.nativeElement.parentElement.parentElement;
+            wrapperElement.classList.remove('igx-overlay__wrapper--modal');
+            wrapperElement.classList.add('igx-overlay__wrapper');
+        }
+    }
+
     private buildAnimationPlayers(info: OverlayInfo) {
         if (info.settings.positionStrategy.settings.openAnimation) {
             const animationBuilder = this.builder.build(info.settings.positionStrategy.settings.openAnimation);

src/app/overlay/overlay.sample.html

@@ -70,6 +70,10 @@
                     <input igxInput name="dropDownWidth" type="number" [(ngModel)]="dropDownWidth">
                     <label igxLabel for="dropDownWidth">Drop down width</label>
                 </igx-input-group>
+                <igx-input-group>
+                    <input igxInput name="animationLength" type="number" [(ngModel)]="animationLength">
+                    <label igxLabel for="animationLength">Animation length in ms</label>
+                </igx-input-group>
             </div>
         </div>
         <div #outlet class="outlet column">

src/app/overlay/overlay.sample.ts

@@ -11,7 +11,8 @@ import {
     NoOpScrollStrategy,
     ElasticPositionStrategy,
     IgxDragDirective,
-    ContainerPositionStrategy
+    ContainerPositionStrategy,
+    IAnimationParams
 } from 'igniteui-angular';
 
 @Component({
@@ -48,6 +49,7 @@ export class OverlaySampleComponent implements OnInit {
     public closeOnOutsideClick = true;
     public modal = true;
     public useOutlet = false;
+    public animationLength = 300; // in ms
 
     private xAddition = 0;
     private yAddition = 0;
@@ -341,6 +343,10 @@ export class OverlaySampleComponent implements OnInit {
             this.cdr.detectChanges();
             this.onChange2();
             this._overlaySettings.target = this.button.nativeElement;
+            (this._overlaySettings.positionStrategy.settings.openAnimation.options.params as IAnimationParams).duration
+                = `${this.animationLength}ms`;
+            (this._overlaySettings.positionStrategy.settings.closeAnimation.options.params as IAnimationParams).duration
+                = `${this.animationLength}ms`;
         }
         this.igxDropDown.toggle(this._overlaySettings);
     }