sidebar animations

This commit is contained in:
lotte
2018-11-23 14:44:11 +01:00
parent ea3a2076c7
commit 567d4dc331
20 changed files with 326 additions and 231 deletions

View File

@@ -1,12 +1,18 @@
import { animate, state, style, transition, trigger } from '@angular/animations';
import {
animate,
animateChild,
group, query, sequence,
state,
style,
transition,
trigger
} from '@angular/animations';
export const slide = trigger('slide', [
state('expanded', style({ height: '*' })),
state('collapsed', style({ height: 0 })),
transition('expanded <=> collapsed', animate('250ms'))
state('void', style({ height: 0 })),
state('*', style({ height: '*' })),
transition(':enter', [animate('200ms')]),
transition(':leave', [animate('200ms')])
]);
export const slideMobileNav = trigger('slideMobileNav', [
@@ -27,5 +33,14 @@ export const slideSidebar = trigger('slideSidebar', [
state('collapsed', style({ width: '*' })),
transition('expanded <=> collapsed', animate('300ms ease-in-out')),
transition('expanded <=> collapsed',
group
(
[
query('@*', animateChild()),
animate('300ms ease-in-out'),
]
))
]);