Custom back animation in angular router

Question

My problem is that I have several pages which are using routerTransition as it can be found in several places (with the use of query(...) method). The problem is that I would like to have a different animation when my component leaves or enters on browser's back button press. To be more specific:

On regular navigation my component should enter from right to left
On backward navigation my component should enter from left to right

and vica-versa for leaving.

If I could somehow detect in a router event if it's a forward or backward navigation, then I could easily do this, but I couldn't find out how to detect this without adding further data to my routes.

Edit:

I tried to do something like @Vega mentioned, I paste a snippet about it.

Template:

<div class="root" [@routerTransition]="navigationState$ | async" 
                  (@routerTransition.done)="onDone($event)">
    <sdx-router-outlet [size]="currentSize"></sdx-router-outlet>
</div>

Code:

this.navigationState$ = this._actions$.ofType(ActionTypes.GO_BACK)
    .map(() => {
        return { isGoingBack: true };
    })
    .merge(this._actions$.ofType(ActionTypes.GO_FORWARD).map(() => { return { isGoingBack: false }; }))
    .map((navigation: Navigation) => navigation.isGoingBack ? 'backward' : 'forward')
    .merge(this._resetNavigationState);

public onDone(event) {
    // This is just to reset to a state where I can trigger my animation again
    this._resetNavigationState.next('initial');
}

The idea here was that I set the transition trigger to forward when navigation forward and backward when navigating backward. However, because (I assume at least that this is the cause) the backward setting basicly "comes" from the ng-location service the state will be setted before the router starts navigating, and there won't be any animation because the trigger was fired before attaching or detaching components by the router-outlet.

As you can see I am using ngrx, but I don't think that it is important. The two types basicly just two Observables. One of them if firing on back button press, like @Vega said, the other one I fire with a custom router (for now) where I override the navigateByUrl method and in it I just dispatch a Forward action, then call the super.

What I didn't mentioned is that I don't want to put the animation to my components that I load, because all of the animation is the same. And if I make it like a "default" animation, then I don't have to be afraid of forgetting to put onto some components.

Have a 'global' variable that set to true when 'normal'/forwarding routing is done, and false for the back button pressed. To detect when it's pressed, there are many sources, like this one: https://stackoverflow.com/a/40382451/5468463. If you make it work, post the answer, I am curious to see! — Vega, Aug 22 '17 at 00:54
yeah, I tried something like this before, because I can easily detect back-button press in my system, but because it isn't coming from the router the backward animation never played. I assume because when I triggered the animation through trigger there aren't any `:enter` or `:leave` element. Therefore it wasn't animated. I'll edit my question with a snippet about it. — IThomas91, Aug 22 '17 at 06:46

Custom back animation in angular router

0 Answers0