feat(igxCollapsible): adjust animations, animationSettings is Input(), …

…#307
IgniteUI · Aug 24, 2018 · 936c136 · 936c136
1 parent 991a30b
commit 936c136
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible.component.ts b/projects/igniteui-angular/src/lib/collapsible/collapsible.component.ts
@@ -29,8 +29,17 @@ let NEXT_ID = 0;
 })
 export class IgxCollapsibleComponent {
 
-    animationSettings: { openAnimation: AnimationReferenceMetadata, closeAnimation: AnimationReferenceMetadata } = {
-        openAnimation:  slideInTop,
+    @Input()
+    public animationSettings: { openAnimation: AnimationReferenceMetadata, closeAnimation: AnimationReferenceMetadata } = {
+        openAnimation:  Object.assign(slideInTop, {
+            fromScale: 0,
+            toScale: 1,
+            fromPosition: 'translateY(0px)',
+            toPosition: 'translateY(0px)',
+            startOpacity: 0.7,
+            endOpacity: 1,
+            easing: `cubic-bezier(0.895, 0.030, 0.685, 0.220)`
+        }),
         closeAnimation: slideOutTop
     };
 

diff --git a/src/app/collapsible/collapsible-sample.html b/src/app/collapsible/collapsible-sample.html
@@ -2,7 +2,7 @@
     <app-page-header title="Collapsible" description="Collapsible lets you display content with a toggleable details view"></app-page-header>
     <section>
         <div class="game-board">
-            <igx-collapsible class="game-board__collapsible" [disabled]="false">
+            <igx-collapsible [animationSettings]="animationSettings" class="game-board__collapsible" [disabled]="false"
             (onCollapsed)="handleCollapsed($event)"
             (onExpanded)="handleExpanded($event)" #collapsibleComponent>
                 <igx-collapsible-header [buttonPosition]="'right'" (onInterraction)="onInterraction($event)">

diff --git a/src/app/collapsible/collapsible-sample.ts b/src/app/collapsible/collapsible-sample.ts
@@ -1,5 +1,7 @@
-import { IgxCollapsibleComponent } from 'igniteui-angular';
+import { IgxCollapsibleComponent, slideInTop, slideOutTop, scaleInTop,
+    scaleInVerBottom, scaleInVerTop, scaleOutVerBottom, scaleOutVerTop } from 'igniteui-angular';
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { AnimationReferenceMetadata } from '@angular/animations';
 
 @Component({
     // tslint:disable-next-line:component-selector
@@ -12,6 +14,28 @@ export class CollapsibleSampleComponent implements OnInit {
     public igxCollapsible: IgxCollapsibleComponent;
     @ViewChild('button') public button: ElementRef;
 
+    public animationSettings: { openAnimation: AnimationReferenceMetadata, closeAnimation: AnimationReferenceMetadata } = {
+        openAnimation:  Object.assign(scaleInVerTop, {
+            options: {
+                params: Object.assign(scaleInVerTop.options.params, {
+                    startOpacity: 0.5,
+                    fromScale: 0,
+                    duration: '250ms'
+                })
+            }
+        }),
+        closeAnimation: Object.assign(scaleOutVerTop, {
+            options: {
+                params: Object.assign(scaleOutVerTop.options.params, {
+                    startOpacity: 1,
+                    endOpacity: 0.5,
+                    fromScale: 1,
+                    toScale: 0,
+                    duration: '350ms'
+                })
+            }
+        })
+    };
     public templatedIcon = false;
     public score: number;
     public data = [];