fix: improve x-servers dropdown animation performance

Redocly · Feb 27, 2017 · 69c7d98 · 69c7d98
1 parent 258009b
commit 69c7d98
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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;