Question

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

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

和

Angular 2 "slide in animation" of a routed component

然而，这太静止了。我希望它向右滑动和，具体取决于标签的顺序。

是否可以为此创建路由器动画？我的意思如下：

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'
      }
    ]

并且过渡与Dolan's帖子中的过渡相同：

const left = [
    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
    group([
        query(':enter', [style({ transform: 'translateX(-100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
            optional: true,
        }),
        query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(100%)' }))], {
            optional: true,
        }),
    ]),
];

const right = [
    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
    group([
        query(':enter', [style({ transform: 'translateX(100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
            optional: true,
        }),
        query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(-100%)' }))], {
            optional: true,
        }),
    ]),
];

Answer 2

我已经设法通过“伪造”它所处的状态来实现这一目标。

在component.html：

中

<div [@animRoutes]="pageState">
   <router-outlet></router-outlet>
</div>

pageState是component.ts文件中的变量。

每当我点击要向右移动的标签页时，我都会将pageState设置为right，并将left设置为相同，并让 Angular 接管其余部分。

注意：您必须创建right和right1状态为 hack ，因为Angular目前不支持{{1}状态转换!!同样适用于right => right。

我的left注释如下：

@Component

其中@Component({ selector: 'app-workspace-container', templateUrl: './workspace-container.component.html', styleUrls: ['./workspace-container.component.scss'], animations: [ trigger('animRoutes', [ transition('* => right', right), transition('* => left', left), transition('* => right1', right), transition('* => left1', left), ]), ], changeDetection: ChangeDetectionStrategy.OnPush, })，left，left1，right是：

right1

TL; DR：将您要进入的状态转换为变量，这样您就可以动态设置您希望的状态。

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

2 个答案: