Question

我完成了Angular 2团队提供的整个animation documentation，因此我已经了解它的工作原理。

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

我现在要做的是仅在page1转到page2时才应用路线更改动画，如果从page1过渡到page3则不适用{1}}。

@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时才应用动画？

Answer 1

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

CSS

databind

HTML

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

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

JS

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

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

1 个答案: