From 69c7d983fb86deb887d4625919d980feef8eb563 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Mon, 27 Feb 2017 18:37:38 +0200
Subject: [PATCH] fix: improve x-servers dropdown animation performance

---
 lib/components/EndpointLink/endpoint-link.html |  2 +-
 lib/components/EndpointLink/endpoint-link.scss |  8 ++++++++
 lib/components/EndpointLink/endpoint-link.ts   | 14 +-------------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/lib/components/EndpointLink/endpoint-link.html b/lib/components/EndpointLink/endpoint-link.html
index 669d53d0aa..838bc08f5e 100644
--- a/lib/components/EndpointLink/endpoint-link.html
+++ b/lib/components/EndpointLink/endpoint-link.html
@@ -7,7 +7,7 @@ <h5 class="http-verb" [ngClass]="verb">{{verb}}</h5>
 <svg class="expand-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
   <polygon fill="white" points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "/>
 </svg>
-<div class="servers-overlay" [@overlayExpand]="expanded ? 'expanded' : 'collapsed'">
+<div class="servers-overlay">
   <div *ngFor="let server of servers" class="server-item">
     <div class="description" [innerHtml]="server.description | marked"></div>
     <div select-on-click class="url">
diff --git a/lib/components/EndpointLink/endpoint-link.scss b/lib/components/EndpointLink/endpoint-link.scss
index 16c1e970c4..32d2d3a213 100644
--- a/lib/components/EndpointLink/endpoint-link.scss
+++ b/lib/components/EndpointLink/endpoint-link.scss
@@ -91,6 +91,10 @@
   position: absolute;
 }
 
+.servers-overlay {
+  transform: translateY(-50%) scaleY(0);
+  transition: all 0.25s ease;
+}
 :host.expanded {
   > .method-endpoint {
     border-color: $side-bar-bg-color;
@@ -101,4 +105,8 @@
   .expand-icon {
     transform: rotateZ(180deg);
   }
+
+  .servers-overlay {
+    transform: translateY(0%) scaleY(1);
+  }
 }
diff --git a/lib/components/EndpointLink/endpoint-link.ts b/lib/components/EndpointLink/endpoint-link.ts
index b5c9f45572..7922a6f132 100644
--- a/lib/components/EndpointLink/endpoint-link.ts
+++ b/lib/components/EndpointLink/endpoint-link.ts
@@ -1,7 +1,6 @@
 'use strict';
 import { Component, ChangeDetectionStrategy, Input, OnInit, HostListener, HostBinding} from '@angular/core';
 import { BaseComponent, SpecManager } from '../base';
-import { trigger, state, animate, transition, style } from '@angular/core';
 import { OptionsService } from '../../services/';
 
 export interface ServerInfo {
@@ -13,18 +12,7 @@ export interface ServerInfo {
   selector: 'endpoint-link',
   styleUrls: ['./endpoint-link.css'],
   templateUrl: './endpoint-link.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('overlayExpand', [
-      state('collapsed, void',
-        style({ height: '0px' })),
-      state('expanded',
-        style({ height: '*' })),
-      transition('collapsed <=> expanded', [
-        animate('200ms ease')
-      ])
-    ])
-  ]
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EndpointLink implements OnInit {
   @Input() path:string;