Bring back side-menu animations

This commit is contained in:
Roman Hotsiy 2017-01-06 13:14:47 +02:00
parent 177bffb1c3
commit 067a847716
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
2 changed files with 14 additions and 14 deletions

View File

@ -1,7 +1,7 @@
<li *ngFor="let item of items; let idx = index" class="menu-item"
ngClass="menu-item-depth-{{item.depth}} {{item.active ? 'active' : ''}} menu-item-for-{{item.metadata?.type}}">
<label class="menu-item-header" [ngClass]="{disabled: !item.ready}" (click)="activateItem(item)"> {{item.name}}</label>
<ul *ngIf="item.items" class="menu-subitems">
<ul *ngIf="item.items" class="menu-subitems" [@itemAnimation]="(item.active || item.isGroup) ? 'expanded' : 'collapsed'">
<side-menu-items [items]="item.items" (activate)="activateItem($event)"> </side-menu-items>
</ul>
</li>

View File

@ -13,7 +13,18 @@ const global = window;
@Component({
selector: 'side-menu-items',
templateUrl: './side-menu-items.html',
styleUrls: ['./side-menu-items.css']
styleUrls: ['./side-menu-items.css'],
animations: [
trigger('itemAnimation', [
state('collapsed, void',
style({ height: '0px' })),
state('expanded',
style({ height: '*' })),
transition('collapsed <=> expanded', [
animate('200ms ease')
])
])
]
})
export class SideMenuItems {
@Input() items: MenuItem[];
@ -27,18 +38,7 @@ export class SideMenuItems {
@Component({
selector: 'side-menu',
templateUrl: './side-menu.html',
styleUrls: ['./side-menu.css'],
animations: [
// trigger('itemAnimation', [
// state('collapsed, void',
// style({ height: '0px' })),
// state('expanded',
// style({ height: '*' })),
// transition('collapsed <=> expanded', [
// animate('200ms ease')
// ])
// ])
],
styleUrls: ['./side-menu.css']
})
export class SideMenu extends BaseComponent implements OnInit, OnDestroy {
activeCatCaption: string;