angular 4 动画如何正确过渡 routeroutlet？

Question

这是我想要实现的，我想要一个在更改页面时向左和向右滑动的过渡，但是我的代码不起作用，事件已经触发，然后当我滚动页面时它触发了这么多事件（我用 console.log 测试）

这是我的代码的样子

app.component.html：

<main [@routerTransition]="getRouterOutletState(o)">
  <router-outlet #o="outlet"></router-outlet>
</main>

这是我的 app.component.ts ：

animations: [
    trigger('routerTransition', [
      state('in', style({ transform: 'translateX(0)' })),
      transition('out => in', [
        style({ transform: 'translateX(-100%)' }),
        animate(400)
      ]),
      transition('in => out', [
        animate(400, style({ transform: 'translateX(100%)' }))
      ])
    ]),
  ]

})


export class AppComponent {
    fadePageInOut: string = 'in';

  getRouterOutletState(outlet) {
    console.log(outlet + " event triggered outlet");
    this.fadePageInOut = (this.fadePageInOut === 'in' ? 'out' : 'in');
  }

}

为什么它不起作用？我在这里错过了什么？我的代码结果的console.log是这样的：

当我上下滚动页面时事件增加，我必须为事件触发做错事，但转换仍然无法工作

Answer 1

主要问题在于您的动画控制器：您应该将其绑定到具有动画状态的属性，而不是方法，如下所示：

<main [@routerTransition]="fadePageInOut">

可能还有一些问题，如果没有现场示例，我真的不能说，但我认为这种改变应该可以解决问题。

只有当您将状态从“out”更改为“in”时动画才会触发，反之亦然，因此您似乎也应该更改：

transition('out => in', [

到这里：

transition('* => in', [

Answer 2

您没有从 getRouterOutletState() 函数返回任何值。结果动画没有被触发。从getRouterOutletState() 函数中添加一个return 语句并返回fadePageInOut 的当前值。

getRouterOutletState(outlet) {
  console.log(outlet + " event triggered outlet");
  this.fadePageInOut = (this.fadePageInOut === 'in' ? 'out' : 'in');

  return this.fadePageInOut; // <-- Add this line
}

角度路线动画的有用链接：https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8