Angular 5浏览动画但有条件的

Question

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

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

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

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

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

（这不是这个问题的一部分，但是为了让您了解这个问题的方向：作为奖励，我会添加一个功能，如果您点击导航，它会连续导航到每个中间步骤元素远离自身n + 1。这样做的目的是模仿每个页面确实构成单个滑块或轮转到脚趾的感觉。）

我已经成功设置了路由和动画，我已经可以通过参数可视化功能的逻辑：＆＃34;当前路由＆＃34;和＆＃34;新路线＆＃34;，可以吐出一个布尔表示＆＃34; slideLeft＆＃34;或＆＃34; slideRight＆＃34;。

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

我没有得到的是在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('* => *', [

：* => *表示＆＃34;从任何名称到任何名称＆＃34;起初我虽然可以通过每次用路线名称替换它来使用它，但我在实施中迷失了，我现在相信必须有一个更简单的方法。

我想做的事情是：

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

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

Answer 1

在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;
}

Answer 2

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