Can't get animations to work with md-tab-nav-bar/md-tab-link

Question

I switched from MdTabGroup to the md-tab-nav-bar/md-tab-link directives in order to be able to assign routes to individual tab pages. Unfortunately though, I lost the slide-in animation in the process (there appears to be no animation for the directive), so I tried to mimic the behavior from MdTab with no success so far.

Here's the template using the tab directives:

<div class="ink-results" *ngIf="model && (model | async).length > 0" >
    <nav md-tab-nav-bar>
        <a md-tab-link
            *ngFor="let browser of model | async;trackBy: trackByBrowserId"
            [routerLink]="['/results', browser.id]"
            routerLinkActive #rla="routerLinkActive"
            [active]="rla.isActive">
            {{browser.name}}
        </a>
    </nav>
    <router-outlet></router-outlet>
</div>

and here's the template that is routed to:

<div class="ink-explorer">
    <div class="ink-items">
        <div class="ink-item"
            [@flyInOut]="state"
            *ngFor="let result of results | async;trackBy: trackById"
            routerLinkActive="ink-active-item">
            <a [routerLink]="[result.id]">
                <md-icon svgIcon="flask" 
                    [ngClass]="{ 'ink-failed': (result.status === 2), 'ink-pending': result.status === 4, 'ink-success': result.status === 6 }">
                </md-icon>
                <div class="ink-item-title">{{result.description}}</div>
            </a>
        </div>
    </div>
    <div class="ink-preview">
        <router-outlet></router-outlet>
    </div>
</div>

The animation (flyInOut) itself is working perfectly (tested in different projects) and is executed once when the first tab is selected

http://localhost:3000/results/<tab1>

If I click on the second tab after, I navigate to

http://localhost:3000/results/<tab2>

alright but there is no transition/animation at all. I figure that is because I have exactly one state inside the component and there is only one instance of that component and thus only this single state.

I'm wondering what I can do about that, I'd like to have that slide in/out animation for my tabs again. The whole project can be found here if that is any help.

Answer 1

Based on the article of Angular — Supercharge your Router transitions using animations you can create your own routing animations.

Using the same reference, I have created a sample code on stackblitz.

Key things to note:

1. You will need to import BrowserAnimationsModule in your module
2. router.animations.ts - To handle animations based on the state of the route. These animations are based on state (which is number, 1 for the first router, 2 for the second router and so on.) of the route, which is defined in routes constant in main.ts file. You would notice, I have used :increment and :decrement in transitions's stateChangeExpr, like below:

   transition(':decrement', [...]), // if state-number is decremented, this animation will be performed
   transition(':increment', [...]) // if state-number is incremented, this animation will be performed
   

   The reason to do like above is to handle all tabs transitions dynamically based on their state numbers. So that, we don't have to handle each transition/animation separately for all routes/tabs.
3. Trigger animation on route change - tab-nav-bar-basic-example.html, like below:

<main [@routerTransition]="getState(o)">
    <router-outlet #o="outlet"></router-outlet>
</main>