Angular ':increment' / ':decrement' 別名未觸發

Question

我對 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

Answer 1

我似乎已經修復了它 - 解決方案是將觸發器向上移動一級以包裝所有菜單。

對於仍在尋找此問題答案的任何人，我更新了 StackBlitz 示例