Angular 5浏览动画但有条件

Question

我有一个带有 6 个项目的编号导航菜单，它们的顺序很重要，例如，例如结帐然后登录/创建帐户然后发货然后付款设置：

您可以在任何步骤返回步骤。转发也被授权。前后跳跃几个。

我希望页面内容的动画符合这些步骤的顺序逻辑。

为此，我从这里获取了我的代码：https://plnkr.co/edit/Uo1coU9i1GsB1I4U3809?p=preview

（我复制了 routerTransition 代码，然后将第一个代码重命名为 slideLeft 反转动画并将第二个代码重命名为 slideRight）。

（这不是这个问题的一部分，而是为了让您了解它的标题：作为奖励，如果您单击导航元素更多，我将添加一个功能，为您连续导航到每个中间步骤然后 n+1 远离自身。这样做的目的是模拟每个页面确实构成单个滑块或轮播的感觉。）

我已经成功设置了路由和动画，我已经可以可视化函数的逻辑了”。

我缺少的是如何告诉应用程序是向左滑动还是向右滑动？

我不明白的是，在 routing.module.html 中，据我所知，语法不允许实现条件：

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

routing.component.ts ：

import { Component, OnInit } from '@angular/core';
import { slideLeft, slideRight } from './router.animations';


@Component({
  selector: 'app-routing',
  templateUrl: './routing.component.html',
  styleUrls: ['./routing.component.scss'],
  animations: [slideLeft, slideRight],
  host: { '[@slideLeft, slideRight]': '' }
})
export class RoutingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  getState(outlet) {
    return outlet.activatedRouteData.state;
  }

}

我注意到了：

export const slideRight = trigger('slideRight', [
      transition('* => *', [

：* => * 的意思是“从任何名称到任何名称”，起初我虽然可以通过每次用路由名称替换它来使用它，但我在实现中迷失了，我现在相信必须有更简单的方法。

我想做的是类似于：

<main {{isCurrentStepIncreasing ? '[@slideLeft]' : '[@slideRight]'}}="getState(o)">
  <router-outlet #o="outlet"></router-outlet>
</main>

我怀疑这实际上是可能的。

Answer 1

我找到了这个https://www.bennadel.com/blog/3139-experimenting-with-conditional-enter-leave-animations-in-angular-2-rc-6.htm 不确定我是否可以实施我会研究它。标记的解决方案变得很棘手，因为它取决于哪个先触发。

Answer 2

在 getStateLeft(outlet) 方法中返回 null 时，似乎没有播放动画。你可以试试这样的：

<main [@slideRight]="getStateLeft(o)" [@slideLeft]="getStateRight(o)">
  <router-outlet #o="outlet"></router-outlet>
</main>


getStateLeft(outlet) {
  if (isCurrentStepIncreasing) {
      return outlet.activatedRouteData.state;
  }
  return null;
}

getStateRight(outlet) {
  if (!isCurrentStepIncreasing) {
      return outlet.activatedRouteData.state;
  }
  return null;
}