2

我正在寻找在我的 Angular 2 RC-6 应用程序中实现漂亮页面滑动动画的可能性。我以这篇文章为例 https://www.bennadel.com/blog/3139-experimenting-with-conditional-enter-leave-animations-in-angular-2-rc-6.htm 但它实现了内部过渡变化。我需要为路由器组件制作它，也就是应用程序页面。

接下来是我的动画设置：

   host: {
    '[@routeAnimation]': 'true',
    '[style.display]': "'block'",
    '[class]':"'animate-jump-off'"
  },
  animations: [
    trigger('routeAnimation', [
      state('in', style({transform: 'translateX(0)'})),
          transition('void => prev', [
            style({transform: 'translateX(-100%)'}),
            animate(300)
          ]),
          transition('prev => void', [
            animate(1000, style({transform: 'translateX(100%)'}))
          ]),
      transition('void => next', [
        style({transform: 'translateX(100%)'}),
        animate(300)
      ]),
      transition('next => void', [
        animate(1000, style({transform: 'translateX(-100%)'}))
      ])


    ])

我有两个过渡 - 下一个和返回。要定义转换，我将变量放在模板中

<div class="card-container" [@routeAnimation] = "direction" >

并将私有变量添加到组件类。我决定使用 EventEmitter 来发出新的状态

 this.emitter.subscribe(msg => {
      this.direction = (msg.direction);
      console.log(msg.direction);
    });

在一些内部组件上，我有指向下一页的链接，即由goNext()函数启动：

emitter = EmitterService.get("direction");
  goNext():void {
    this.emitter.emit({'direction':'next'});
    console.log('next');
    setTimeout(() => {

        //this.router.navigate(['/questions/1']);
    }, 100)

我使用 setTimeout 延迟来确定，该根组件将拦截消息并将其方向状态切换为 'next' ，但它的值不适用于动画。同样的拦截器在下一页，所以在这个页面方向状态也应该切换到'next'。

我现在拥有的。方向值正在改变，但没有出现动画（我在组件构造函数中定义了方向 ='none'）

请告诉我，我做错了什么，如何对当前页面和下一页应用（发送）方向更改，或者是否有其他方法可以检测每个页面上的路由更改？

4

1 回答 1

0

我使用分配给路由的 CanDeactivate Guard 而不是超时，这会在处理路由更改之前触发最后一个更改检测周期。

https://stackoverflow.com/a/42948545/5155810

于 2017-03-21T23:49:10.167 回答