2

这是我试图实现的目标，我想要在更改页面时向左和向右滑动的过渡，但是我的代码不起作用，事件已经触发，然后当我滚动页面时它触发了很多事件（我用控制台日志）

这是我的代码的样子

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 是这样的：

在此处输入图像描述

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

4

2 回答 2

1

您没有从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
}

Angular Route Animations 的有用链接：https ://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8

于 2017-11-13T05:33:31.707 回答
1

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

<main [@routerTransition]="fadePageInOut">

可能还有更多问题，我真的不能说没有活生生的例子，但我认为这种改变应该可以解决问题。

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

transition('out => in', [

对此：

transition('* => in', [
于 2017-11-13T04:44:25.423 回答