Last active
November 1, 2017 23:08
-
-
Save justindujardin/4f34d692684511f830b1d336f07e1824 to your computer and use it in GitHub Desktop.
How to build a summary/details card view transition in Angular and NativeScript. From: https://youtu.be/hK5oHdq9dx4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Component({ | |
moduleId: module.id, | |
selector: 'lol-card', | |
template: ` | |
<GridLayout [@container]="state$ | async" (tap)="toggle()"> | |
<AbsoluteLayout> | |
<Image [@image]="state$ | async"></Image> | |
<Gradient [@gradient]="state$ | async"></Gradient> | |
</AbsoluteLayout> | |
</GridLayout> | |
`, | |
animations: [ | |
trigger('container', [ | |
state('default', style({transform: 'scale(0.9)'})), | |
state('details', style({transform: 'scale(1)'})), | |
transition('details => default', animate('100ms ease')), | |
transition('default => details', animate('100ms ease')), | |
]), | |
trigger('gradient', [ | |
state('details', style({opacity: 0})), | |
state('default', style({opacity: 1})), | |
transition('details => default', animate('400ms 100ms ease')), | |
]), | |
trigger('image', [ | |
state('details', style({height: '40%'})), | |
state('default', style({height: '100%'})), | |
transition('default => details', animate('200ms easeOut')), | |
transition('details => default', animate('200ms easeOut')), | |
]), | |
] | |
}) | |
export class CardComponent { | |
state$ = new BehaviorSubject('default'); | |
toggle() { | |
this.state$.next(this.state$.value === 'default' ? 'details' : 'default'); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment