chore(overlay): update sample to allow change of animations duration

IgniteUI · Oct 4, 2021 · 550c0ed · 550c0ed
1 parent 081af5f
commit 550c0ed
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/app/overlay/overlay.sample.html b/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">

diff --git a/src/app/overlay/overlay.sample.ts b/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);
     }