18

我切换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在组件内部只有一个，并且该组件只有一个实例，因此只有这个单一状态。

我想知道我能做些什么，我想再次为我的标签制作滑入/滑出动画。如果有任何帮助，可以在此处找到整个项目。

4

1 回答 1

2

根据Angular 的文章 — 使用动画增强路由器转换，您可以创建自己的路由动画。

使用相同的参考，我在stackblitz创建了一个示例代码。

需要注意的关键事项：

  1. 您将需要BrowserAnimationsModule在您的模块中导入
  2. router.animations.ts- 根据路线状态处理动画。这些动画基于state路由的（编号，1 表示第一个路由器，2 表示第二个路由器，依此类推），该路由在文件中的routes常量中定义。main.ts您会注意到，我使用了:incrementand :decrementin transitions's 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
    这样做的原因是根据它们的状态编号动态处理所有选项卡转换。因此，我们不必为所有路线/选项卡单独处理每个过渡/动画。
  3. 路线变化时触发动画 - tab-nav-bar-basic-example.html，如下所示：
<main [@routerTransition]="getState(o)">
    <router-outlet #o="outlet"></router-outlet>
</main>
于 2019-01-24T06:15:40.690 回答