Angular ':increment' / ':decrement' 别名未触发答案

【问题标题】：Angular ':increment' / ':decrement' aliases not triggeringAngular ':increment' / ':decrement' 别名未触发
【发布时间】：2020-01-07 07:34:54
【问题描述】：

我在使用 Angular 动画时遇到了一点问题。目标是在进入隐藏的同级菜单时创建“滑动”效果。

目前，由于我需要实现的设计，菜单结构是扁平的。这意味着即使是子菜单也与他们的实际父母处于兄弟姐妹的水平。菜单基于 ID 属性触发。

我能够将 Angular 动画应用到这个过程中，显示从 从左到右的“滑动”效果。问题是我什么时候回去。如果我去子菜单，我需要能够“向上”到父母。在这种情况下，动画应该反转 - 从从右到左。

我尝试通过设置 menuActiveState 属性并在动画中监听 :increment 和 :decrement 来实现这一点。但是，Angular 似乎根本不听它，因为没有任何动画运行，我不太确定为什么。

激活菜单并调整增量/减量

menuActiveState: number = 0;

activate(id,direction) {

  if(direction == 1) {
    this.menuActiveState++;
  } else {
    this.menuActiveState--;
  }

  this.menuActive = id;

}

在菜单元素上绑定

<ul class="list" [@menuActivateSubmenu]="menuActiveState" *ngIf="ismenuvisible('1')">
  ...
</ul>
<ul class="list" [@menuActivateSubmenu]="menuActiveState" *ngIf="ismenuvisible('1-1')">
  ...
</ul>

实际动画：

trigger('menuActivateSubmenu', [
  transition(':increment', group([
    query(':enter', [
      style({transform: 'translateX(-100%)', zIndex: 2, position: 'relative'}),
      animate('350ms ease', style({transform: 'translateX(0%)'}))
    ]),
    query(':leave', [
      style({transform: 'translateX(0%)', zIndex: 1, position: 'absolute'}),
      animate('350ms ease', style({transform: 'translateX(100%)'}))
    ], { optional: true })
  ])),
  transition(':decrement', group([
    query(':enter', [
      style({transform: 'translateX(100%)', zIndex: 2, position: 'relative'}),
      animate('350ms ease', style({transform: 'translateX(0%)'}))
    ]),
    query(':leave', [
      style({transform: 'translateX(0%)', zIndex: 1, position: 'absolute'}),
      animate('350ms ease', style({transform: 'translateX(-100%)'}))
    ], { optional: true })
  ]))
])

我创建了一个具有当前实现的 StackBlitz 项目：https://stackblitz.com/edit/angular-menu-swipe

【问题讨论】：

标签： angular animation aliases

【解决方案1】：

我似乎已经修复了它 - 解决方案是将触发器上移一层以包裹所有菜单。

对于仍在寻找此问题答案的任何人，我更新了 StackBlitz 示例

【讨论】：