角度路由器过渡动画有条件地向左和向右滑动

Question

我已经阅读了有关Angular的路由器过渡动画的这篇文章:

https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8

和:

路由组件的Angular 2"动画幻灯片"

但是,这太静止了.我希望它左右滑动,并根据标签的顺序正确.

是否可以为此创建路由器动画？我的意思是下面的例子:

https://material.angular.io/components/tabs/examples

看看它是如何载玻片BOTH左和右很自然地取决于你是什么标签.

这必须是动态的,因为选项卡将在运行时添加.

Answer 1

今天的事情有点简单,因为新的动画别名存在:increment和:decrement.Angular 5中引入了别名.所以我的修改后的解决方案是:

    @Component({
      selector: 'app-workspace-container',
      templateUrl: './workspace-container.component.html',
      styleUrls: ['./workspace-container.component.scss'],
      animations: [
        trigger('animRoutes', [
          transition(':increment', right),
          transition(':decrement', left),
        ]),
      ],
  })
  export class ComponentContainingRouterOutlet implements OnDestroy, OnInit {
    //... ngOnInit,ngOnDestroy

    constructor( private route: ActivatedRoute ) { }

    animationState: number;

    onActivate($event) {
      this.animationState = this.route.firstChild.snapshot.data['routeIdx'];
    }
  }

在路由器出口位置调用动画:

<div [@animRoutes]="animationState">
  <router-outlet (activate)="onActivate($event)"></router-outlet>
</div>

修改路由定义为例,看看data: { routeIdx: X }:

    const routes: Routes = [
      {
        path: 'routeOne',
        component: ComponentOne,
        data: { routeIdx: 0 }
      },
      {
        path: 'routeTwo',
        component: ComponentTwo,
        data: { routeIdx: 1}
      },
      {
        path: 'routeThree',
        component: ComponentThree,
        data: { routeIdx: 2 }
      },
      {
        path: 'routeFour',
        component: ComponentFour,
        data: { routeIdx: 3 }
      },
      {
        path: '',
        redirectTo: 'routeOne',
        pathMatch: 'full'
      }
    ]