Question

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

这是使用tab指令的模板：

<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上创建了示例代码。

要注意的重要事项：

您将需要在模块中导入BrowserAnimationsModule
router.animations.ts-根据路线状态处理动画。这些动画基于路由的state（即数字，第一个路由器为1，第二个路由器为2，依此类推），该路由在{{1}中的routes常量中定义。 }文件。您会注意到，我在main.ts的{{1}}中使用了:increment和:decrement，如下所示：
```
transitions
```
进行上述操作的原因是根据其状态编号动态处理所有选项卡过渡。这样一来，我们不必为所有路线/标签分别处理每个过渡/动画。
有关路线更改的触发动画-stateChangeExpr，如下所示：

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

无法使用动画来使用md-tab-nav-bar / md-tab-link

1 个答案: