Skip to content

Commit 69c7d98

Browse files
committed
fix: improve x-servers dropdown animation performance
1 parent 258009b commit 69c7d98

File tree

3 files changed

+10
-14
lines changed

3 files changed

+10
-14
lines changed

lib/components/EndpointLink/endpoint-link.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ <h5 class="http-verb" [ngClass]="verb">{{verb}}</h5>
77
<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">
88
<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 "/>
99
</svg>
10-
<div class="servers-overlay" [@overlayExpand]="expanded ? 'expanded' : 'collapsed'">
10+
<div class="servers-overlay">
1111
<div *ngFor="let server of servers" class="server-item">
1212
<div class="description" [innerHtml]="server.description | marked"></div>
1313
<div select-on-click class="url">

lib/components/EndpointLink/endpoint-link.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,10 @@
9191
position: absolute;
9292
}
9393

94+
.servers-overlay {
95+
transform: translateY(-50%) scaleY(0);
96+
transition: all 0.25s ease;
97+
}
9498
:host.expanded {
9599
> .method-endpoint {
96100
border-color: $side-bar-bg-color;
@@ -101,4 +105,8 @@
101105
.expand-icon {
102106
transform: rotateZ(180deg);
103107
}
108+
109+
.servers-overlay {
110+
transform: translateY(0%) scaleY(1);
111+
}
104112
}

lib/components/EndpointLink/endpoint-link.ts

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use strict';
22
import { Component, ChangeDetectionStrategy, Input, OnInit, HostListener, HostBinding} from '@angular/core';
33
import { BaseComponent, SpecManager } from '../base';
4-
import { trigger, state, animate, transition, style } from '@angular/core';
54
import { OptionsService } from '../../services/';
65

76
export interface ServerInfo {
@@ -13,18 +12,7 @@ export interface ServerInfo {
1312
selector: 'endpoint-link',
1413
styleUrls: ['./endpoint-link.css'],
1514
templateUrl: './endpoint-link.html',
16-
changeDetection: ChangeDetectionStrategy.OnPush,
17-
animations: [
18-
trigger('overlayExpand', [
19-
state('collapsed, void',
20-
style({ height: '0px' })),
21-
state('expanded',
22-
style({ height: '*' })),
23-
transition('collapsed <=> expanded', [
24-
animate('200ms ease')
25-
])
26-
])
27-
]
15+
changeDetection: ChangeDetectionStrategy.OnPush
2816
})
2917
export class EndpointLink implements OnInit {
3018
@Input() path:string;

0 commit comments

Comments
 (0)