feat(animations): added collapse animation and used in steps and expa…

…nsion (#186)

* add TdCollapseAnimation to use in stepper and expansion

* add TdCollapseAnimation function in platform/core index.ts

* replace [tdToggle] for [@tdCollapse] in expansion-panel

* replace [tdToggle] for [@tdCollapse] in stepper

* bugfix with animation overflow in FF50

* added display on animation to none and * for a11y

src/platform/core/animations/collapse.animation.ts

@@ -0,0 +1,28 @@
+import { trigger, state, style, transition, animate, AnimationEntryMetadata } from '@angular/core';
+
+/**
+ * Function TdCollapseAnimation
+ * 
+ * params:
+ * * duration: Duration of animation in miliseconds. Defaults to 150 ms.
+ * 
+ * Returns an [AnimationEntryMetadata] object with states for a collapse/expand animation.
+ * 
+ * usage: [@tdCollapse]="true|false"
+ */
+export function TdCollapseAnimation(duration: number = 150): AnimationEntryMetadata {
+  return trigger('tdCollapse', [
+    state('true', style({
+      height: '0',
+      overflow: 'hidden',
+      display: 'none',
+    })),
+    state('false',  style({
+      height: '*',
+      overflow: 'hidden',
+      display: '*',
+    })),
+    transition('0 => 1', animate(duration + 'ms ease-in')),
+    transition('1 => 0', animate(duration + 'ms ease-out')),
+  ]);
+}

src/platform/core/expansion-panel/expansion-panel.component.html

@@ -28,10 +28,10 @@
     </a>
   </md-nav-list>
   <div>
-    <div [tdToggle]="!expand">
+    <div class="td-expansion-content" [@tdCollapse]="!expand">
       <ng-content></ng-content>
     </div>
-    <div [tdToggle]="expand">
+    <div class="td-expansion-summary" [@tdCollapse]="expand">
       <ng-content select="td-expansion-summary"></ng-content>
     </div>
   </div>

src/platform/core/expansion-panel/expansion-panel.component.scss

@@ -60,3 +60,7 @@ md-nav-list {
   text-overflow: ellipsis;
   margin-right: 5px;
 }
+.td-expansion-content,
+.td-expansion-summary {
+  overflow: hidden; // FF50 bugfix since overflow style in animation doesnt work
+}

src/platform/core/expansion-panel/expansion-panel.component.ts

@@ -2,6 +2,8 @@ import { Component, Directive, Input, Output, TemplateRef, ViewContainerRef, Con
 import { EventEmitter } from '@angular/core';
 import { TemplatePortalDirective } from '@angular/material';
 
+import { TdCollapseAnimation } from '@covalent/core/animations/collapse.animation';
+
 @Directive({
   selector: '[td-expansion-panel-header]template',
 })
@@ -39,6 +41,9 @@ export class TdExpansionPanelSummaryComponent {}
   selector: 'td-expansion-panel',
   styleUrls: [ 'expansion-panel.component.scss' ],
   templateUrl: 'expansion-panel.component.html',
+  animations: [
+    TdCollapseAnimation(),
+  ],
 })
 export class TdExpansionPanelComponent {
 

src/platform/core/index.ts

@@ -185,6 +185,11 @@ import { TdMediaToggleDirective } from './media/directives/media-toggle.directiv
 export { TdMediaService } from './media/services/media.service';
 export { TdMediaToggleDirective } from './media/directives/media-toggle.directive';
 
+/**
+ * ANIMATIONS
+ */
+export { TdCollapseAnimation } from './animations/collapse.animation';
+
 @NgModule({
   imports: [
     HttpModule,

src/platform/core/steps/step-body/step-body.component.html

@@ -1,15 +1,15 @@
 <div layout="row" flex>
   <ng-content></ng-content>
   <div flex>
-    <div class="td-step-content-wrapper" [tdToggle]="!active">
+    <div class="td-step-content-wrapper" [@tdCollapse]="!active">
       <div #contentRef [class.td-step-content]="contentRef.children.length || contentRef.textContent.trim()">
         <ng-content select="[td-step-body-content]"></ng-content>
       </div>
       <div #actionsRef layout="row" [class.td-step-actions]="actionsRef.children.length || actionsRef.textContent.trim()">
         <ng-content select="[td-step-body-actions]"></ng-content>
       </div>
     </div>
-    <div #summaryRef [tdToggle]="active || !isComplete()" [class.td-step-summary]="summaryRef.children.length || summaryRef.textContent.trim()">
+    <div #summaryRef [@tdCollapse]="active || !isComplete()" [class.td-step-summary]="summaryRef.children.length || summaryRef.textContent.trim()">
       <ng-content select="[td-step-body-summary]"></ng-content>
     </div>
   </div>

src/platform/core/steps/step-body/step-body.component.scss

@@ -5,3 +5,8 @@
 .td-step-actions {
   margin: $margin;
 }
+
+.td-step-summary,
+.td-step-content-wrapper {
+  overflow: hidden; // FF50 bugfix since overflow style in animation doesnt work
+}

src/platform/core/steps/step-body/step-body.component.ts

@@ -2,10 +2,15 @@ import { Component, Input } from '@angular/core';
 
 import { StepState } from '../step.component';
 
+import { TdCollapseAnimation } from '@covalent/core/animations/collapse.animation';
+
 @Component({
   selector: 'td-step-body',
   styleUrls: [ 'step-body.component.scss' ],
   templateUrl: 'step-body.component.html',
+  animations: [
+    TdCollapseAnimation(),
+  ],
 })
 export class TdStepBodyComponent {