I am trying to get animation between the routes working in an Angular 4 project, but should be able to change the direction of the animation (translateX) depending on how the user navigates through the application.
I found that the only way to save both inbound and outbound components in the DOM is to use an empty state.
In addition, I need to associate the animation with the host element. If I try to bind it to an element inside a component, the output component will simply be replaced by the incoming component.
I want this because I don't want the outgoing component to disappear — I want it to slide when the inbound component slides in order to get the application with a natural feel.
I have one trigger configured with four transitions:
trigger('routing',[ state('*',style({transform: 'translateX(0)'})), transition('void => back',[ style({transform: 'translateX(-100%'}), animate('800ms') ]), transition('back => void',[ animate('800ms',style({ transform:'translateX(100%)' })) ]), transition('void => forward',[ style({transform: 'translateX(100%'}), animate('800ms') ]), transition('forward => void',[ animate('800ms',style({ transform:'translateX(-100%)' })) ]) ])
In my exported classes, I bind this to the host elements of the component using:
@HostBinding('@routing') routing
I can manipulate routing (setting it both “backward” and “forward” in the control direction), but this seems to create a new instance of the variable, so if I want to change the direction of the animation, the output page is animated in the opposite direction to the incoming component because the routing instance does not seem to have changed.
Is there a way to update the routing instance associated with the host element? Is there an alternative way to achieve the result I need?
Thanks.