Question

我正在寻找在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延迟来确定，根组件会截取消息并将其方向状态切换到＆＃39; next＆＃39; ，但它的价值不适用于动画。同一个拦截器在下一页，所以在这个页面方向状态也应该切换到＆＃39; next＆＃39;。

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

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

Answer 1

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

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

如何在Angular 2中应用动画状态更改

1 个答案: