Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-22 16:46:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve x-servers dropdown animation performance

Browse Source
This commit is contained in:
Roman Hotsiy 2017-02-27 18:37:38 +02:00
parent 258009b1f7
commit 69c7d983fb
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
3 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/components/EndpointLink/endpoint-link.html
View File

@ -7,7 +7,7 @@
<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">

8
lib/components/EndpointLink/endpoint-link.scss
View File

@ -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);
}
}

14
lib/components/EndpointLink/endpoint-link.ts
View File

@ -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;