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示例

角'：increment'/'：decrement'别名不触发

1 个答案: