angular - 无法让动画与 md-tab-nav-bar/md-tab-link 一起使用

Question

我从 MdTabGroup 切换到 md-tab-nav-bar/md-tab-link 指令以便将路由分配给各个标签页。不幸的是，我在这个过程中丢失了滑入动画(该指令似乎没有动画)，所以我试图模仿 MdTab 的行为，但到目前为止没有成功。

这是使用制表符指令的模板:

<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>

这是路由到的模板:

<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>

动画 (flyInOut) 本身运行良好(在不同的项目中测试)并且在选择第一个选项卡时执行一次

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

如果我点击第二个选项卡，我导航到

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

好吧，但根本没有过渡/动画。我认为这是因为我在组件中只有一个 state 并且该组件只有一个实例，因此只有一个状态。

我想知道我能做些什么，我想再次为我的选项卡添加滑入/滑出动画。整个项目可以找到here如果有任何帮助。

Answer 1

基于Angular — Supercharge your Router transitions using animations的文章您可以创建自己的路由动画。

使用相同的引用，我在 stackblitz 上创建了一个示例代码.

主要注意事项:

1. 您需要在模块中导入 BrowserAnimationsModule
2. router.animations.ts - 根据路由状态处理动画。这些动画基于路由的state(即数字，第一个路由器为 1，第二个路由器为 2，依此类推。)在 routes 中定义main.ts 文件中的常量。您会注意到，我在 transitions 的 stateChangeExpr 中使用了 :increment 和 :decrement，如下所示:

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

   这样做的原因是根据状态编号动态处理所有选项卡转换。这样，我们就不必为所有路由/选项卡单独处理每个过渡/动画。
3. 在路线变化时触发动画 - tab-nav-bar-basic-example.html，如下所示:

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