Angular 2 - 为具有相同功能的多个元素触发动画答案

【问题标题】：Angular 2 - trigger animation for multiple elements with same functionAngular 2 - 为具有相同功能的多个元素触发动画
【发布时间】：2018-09-17 22:23:10
【问题描述】：

我现在开始使用 angular，当我尝试创建切换类别菜单时遇到了问题。

我的导航栏组件带有动画触发器：

  trigger('slideCategory', [
      state('opened', style({
          display: 'block',
      })),

      state('closed', style({
          display: 'none',
      })),

      state('visible', style({
          opacity: 1
      })),

      state('unvisible', style({
          opacity: 0
      })),

      transition('visible <=> unvisible', animate('300ms'))
  ])

还有一个看起来像这样的组件：

export class NavbarComponent implements OnInit {

ngOnInit() {

}

@Output() navState: EventEmitter<string> = new EventEmitter<string>();
menuState: string = 'out'
stateA: string = 'out';
categoryState: string = 'closed';
listState: string = 'unvisible';

navToggle() {
    this.stateA = this.stateA === 'out' ? 'in' : 'out';
    this.menuState = this.menuState === 'out' ? 'in' : 'out';
    this.categoryState = this.menuState === 'out' ? 'closed' : 
    'closed';
    this.navState.emit(this.menuState);
}

categoryToggle($event) {
     this.categoryState = this.categoryState === 'closed' ? 'opened' : 
 'closed';
     this.listState = this.listState === 'unvisible' ? 'visible' : 
 'unvisible';
 }
}

我的这个组件的 HTML 代码：

    <nav [@slideInOut]="menuState">

      <i class="{{ menuState == 'out' ? 'fa fa-bars' : 'fa fa-times' }}" (click)="navToggle()"></i>
      <ul>
        <li><a href="/"><i *ngIf="menuState == 'out'" class="fa fa-home"></i><span [@showA]="stateA">Strona główna</span></a></li>
        <li>
          <a><i *ngIf="menuState == 'out'" class="fa fa-mars"></i>
            <span [@showA]="stateA" >Mężczyzna <i (click)="categoryToggle($event)" class="{{ categoryState == 'opened' ? 'fa fa-chevron-up' : 'fa fa-chevron-down' }}" aria-hidden="true"></i></span>
          </a>
          <ul [@slideCategory]="categoryState">
            <li [@slideCategory]="listState">Obuwie</li>
            <li [@slideCategory]="listState">Okrycie wierzchnie</li>
            <li [@slideCategory]="listState">T-shirty</li>
            <li [@slideCategory]="listState">Bluzy</li>
            <li [@slideCategory]="listState">Spodnie</li>
          </ul>
        </li>
        <li>
          <a><i *ngIf="menuState == 'out'" class="fa fa-venus" aria-hidden="true"></i>
            <span [@showA]="stateA">Kobieta <i class="fa fa-chevron-down" aria-hidden="true"></i></span>
          </a>
        </li>
        <li>
          <a><i *ngIf="menuState == 'out'" class="fa fa-intersex"></i>
            <span [@showA]="stateA">Unisex <i (click)="categoryToggle()" class="{{ categoryState == 'opened' ? 'fa fa-chevron-up' : 'fa fa-chevron-down' }}" aria-hidden="true"></i></span>
          </a>
        </li>
        <li>
          <a><i *ngIf="menuState == 'out'" class="fa fa-child" aria-hidden="true"></i>
            <span [@showA]="stateA">Dzieci<i class="fa fa-chevron-down" aria-hidden="true"></i></span>
          </a>
        </li>
      </ul>

    </nav>

而我想要实现的是，当我点击带有 (click) = "categoryToggle()" 的元素时，只切换当前点击的元素，而不是每个包含此事件的元素。

我想为点击的目标添加任何类，但我应该怎么做才能不丢失触发动画效果？

【问题讨论】：

标签： html angular typescript event-handling frontend

【解决方案1】：

好吧，那太垃圾了。刚刚通过将 categoryState 声明为一个数组来解决它，其中包含每个类别状态的值：

export class NavbarComponent implements OnInit {

ngOnInit() {

}

@Output() navState: EventEmitter<string> = new EventEmitter<string>();
menuState: string = 'out'
stateA: string = 'out';
categoryState: any = {
    1: 'closed',
    2: 'closed',
    3: 'closed',
    4: 'closed',
}

...

categoryToggle(index) {
    this.categoryState[index] = this.categoryState[index] === 'closed' ? 'opened' : 'closed';
    this.listState = this.listState === 'unvisible' ? 'visible' : 'unvisible';
}

【讨论】：