Add simple animations

lib/components/SideMenu/side-menu.html

@@ -10,7 +10,7 @@
   <div *ngFor="let cat of data.menu; let idx = index" class="menu-cat">
 
     <label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [ngClass]="{active: cat.active}"> {{cat.name}}</label>
-    <ul class="menu-subitems" [ngClass]="{active: cat.active}">
+    <ul class="menu-subitems" @itemAnimation="cat.active ? 'expanded' : 'collapsed'">
       <li *ngFor="let method of cat.methods; let methIdx = index"
         [ngClass]="{active: method.active}"
         (click)="activateAndScroll(idx, methIdx)">

lib/components/SideMenu/side-menu.scss

@@ -38,7 +38,6 @@ $mobile-menu-compact-breakpoint: 550px;
     font-weight: $light;
     color: rgba($text-color, .9);
     padding: 0;
-    height: 0;
     overflow: hidden;
 
     &.active {

lib/components/SideMenu/side-menu.ts

@@ -3,7 +3,7 @@
 import { ElementRef, ChangeDetectorRef } from '@angular/core';
 import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
 import { global } from '@angular/core/src/facade/lang';
-
+import { trigger, state, animate, transition, style } from '@angular/core';
 import { RedocComponent, BaseComponent, SchemaManager } from '../base';
 import { ScrollService, Hash, MenuService, OptionsService } from '../../services/index';
 
@@ -13,7 +13,18 @@ import { ScrollService, Hash, MenuService, OptionsService } from '../../services
   providers: [ScrollService, MenuService, Hash],
   styleUrls: ['./side-menu.css'],
   detect: true,
-  onPushOnly: false
+  onPushOnly: false,
+  animations: [
+    trigger('itemAnimation', [
+      state('collapsed, void',
+        style({ height: '0px' })),
+      state('expanded',
+        style({ height: '*' })),
+      transition('collapsed <=> expanded', [
+        animate(200)
+      ])
+    ])
+  ],
 })
 export class SideMenu extends BaseComponent {
   $element: any;

lib/components/base.ts

@@ -79,6 +79,7 @@ export function RedocComponent(options) {
       changeDetection: options.detect ?
         (options.onPushOnly ? ChangeDetectionStrategy.OnPush : ChangeDetectionStrategy.Default) :
         ChangeDetectionStrategy.Detached,
+      animations: options.animations,
       templateUrl: options.templateUrl,
       template: options.template,
       styles: options.styles,

lib/shared/components/Zippy/zippy.html

@@ -3,7 +3,9 @@
     <span class="zippy-indicator">{{ visible ? '&#9662;' : '&#9656;' }}</span>
     {{title}}
   </div>
-  <div class="zippy-content" [ngClass]="{'zippy-hidden': !visible}">
-    <ng-content></ng-content>
+  <div class="zippy-content" @openClose="visible ? 'expanded' : 'collapsed'">
+    <div class="zippy-content-wrap">
+      <ng-content></ng-content>
+    </div>
   </div>
 </div>

lib/shared/components/Zippy/zippy.scss

@@ -47,6 +47,10 @@ span.zippy-indicator {
 }
 
 .zippy-content {
+  overflow: hidden;
+}
+
+.zippy-content-wrap {
   padding: 15px 0;
 }
 

lib/shared/components/Zippy/zippy.ts

@@ -1,13 +1,25 @@
 'use strict';
 
-import { Component, EventEmitter, Output, Input } from '@angular/core';
+import { Component, EventEmitter, Output, Input,
+   trigger, state, animate, transition, style } from '@angular/core';
 import { CORE_DIRECTIVES } from '@angular/common';
 
 @Component({
   selector: 'zippy',
   templateUrl: './zippy.html',
   styleUrls: ['./zippy.css'],
-  directives: [CORE_DIRECTIVES]
+  directives: [CORE_DIRECTIVES],
+  animations: [
+    trigger('openClose', [
+      state('collapsed, void',
+        style({ height: '0px' })),
+      state('expanded',
+        style({ height: '*' })),
+      transition('collapsed <=> expanded', [
+        animate(200)
+      ])
+    ])
+  ],
 })
 export class Zippy {
   @Input() type = 'general';
@@ -16,10 +28,13 @@ export class Zippy {
   @Input() title;
   @Output() open = new EventEmitter();
   @Output() close = new EventEmitter();
-
   toggle() {
     this.visible = !this.visible;
     if (this.empty) return;
-    (this.visible) ? this.open.next({}) : this.close.next({});
+    if (this.visible) {
+      this.open.next({});
+    } else {
+      this.close.next({});
+    }
   }
 }