基于目标/源路由的条件路由更改动画答案

【问题标题】：Conditional route change animations based on target/source route基于目标/源路由的条件路由更改动画
【发布时间】：2017-03-28 22:35:11
【问题描述】：

我浏览了 Angular 2 团队提供的整个 animation documentation，因此我了解了它的工作原理。

当路线改变时（:leave 和:enter 状态），我能够将动画应用到我的组件。

我现在想做的是仅在 page1 转到 page2 时应用路线更改动画，并且在从 page1 过渡到 page3 时不应用。

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  animations: [
    trigger('routerTransition', [
    state('void', style({ position: 'fixed', width: '100%' })),
    state('*', style({ position: 'fixed', width: '100%' })),

    transition(':leave', [
      style({ transform: 'translateX(0%)' }),
      animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
    ])
  ])
  ],
  host: { '[@routerTransition]': '' }
})
export class Page1 {}

有没有办法可以将Router 提供程序传递给animations 属性，并且仅在目标路由为page2 时应用动画？

【问题讨论】：

标签： angular css-animations angular2-routing

【解决方案1】：

我想不出将路由器注入动画属性的方法，所以我推出了自己的方法。

CSS

#page1 {
    position: fixed;
    width: 100%;
    transform: translateX(0%);
    transition: transform 0.4s ease-in-out;

    &.leave {
      transform: translateX(-100%);
    }
}

HTML

<div id="page1" [ngClass]="{ 'leave': isLeaving }"><a (click)="go()">Go</a></div>

go() {

  this.isLeaving = true;

  // awaits for animation to finish
  setTimeout(() => {
    this.router.navigate(['/page2']);
  }, 400);

}

【讨论】：