state('void', style({ width: '100%' })),
state('fade', style({ width: '100%'})),
state('job', style({ width: '100%' })),
state('spawnedjob', style({ width: '100%' })),
transition('fade <=> job', [
style({ position: 'fixed', transform: 'translateX(100%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
]),
transition('job => spawnedjob', [
style({ position: 'fixed', transform: 'translateX(0%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
]),
transition('spawnedjob => job', [
style({ position: 'fixed', transform: 'translateX(0%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
]),
transition('spawnedjob => fade', [
style({ position: 'fixed', transform: 'translateX(0%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
])
]);
байндинг происходит вот так:
@HostBinding('@routerTransition') public get() {
return 'fade';
}
@HostBinding('@routerTransition') public get() {
return 'job';
}
можешь сделать plunker? https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5
Обсуждают сегодня