Angular 5 浏览动画但有条件

Question

我有一个带编号的导航菜单，其中包含 6 个项目，它们的顺序很重要，例如，像结帐然后 login/create 帐户然后发货然后付款设置 :

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

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

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

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

（这不是这个问题的一部分，但为了让您了解它的前进方向：作为奖励，我将添加一个功能，如果您单击导航，它会依次为您导航到每个中间步骤元素距离自身超过 n+1 个。这样做的目的是模拟每个页面确实构成单个滑块或从头到脚的旋转木马的感觉。）

我已经成功地设置了路由和动画，我已经可以想象函数的逻辑，参数："current route"和"new route"，可以吐出一个布尔值表示"slideLeft" 或 "slideRight".

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

我不明白的是，据我所知，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('* => *', [

the : * => * 表示 "from any name to any name" 起初我虽然可以通过每次用路由名称替换它来使用它，但我在实现中迷路了，我现在相信必须是一种更简单的方法。

我想做的是：

<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 不确定我是否可以实施我会调查一下。标记的解决方案变得棘手，因为它取决于先触发的那个。

Angular 5 浏览动画但有条件

Angular 5 Browsing animations but conditional

angular

animation

angular-routing

angular-router

angular-animations