animation - Animate component out Angular 2 -
i want animate component in , out while navigating on site. have code:
@component ({ moduleid: module.id, selector: 'animated-component', template: '<div [@flyinout]="state"> animated section </div>', animations: [ trigger('flyinout', [ state('in', style({transform: 'translatex(0)'})), transition('void => *', [ style({transform: 'translatex(-100%)'}), animate(1000) ]), transition('* => void', [ animate(100, style({transform: 'translatex(100%)'})) ]) ])] export class animatedcomponent { public state : string; constructor() { this.state = "in"; } }
the in animation works, when navigate other component, current component disapears instead of animate out. how can trigger void state correctly?
Comments
Post a Comment