Angular：点击父项图标时如何触发对应子列表的动画？

嘿，我来帮你搞定每个父项独立控制子列表动画的需求！你现在的问题是用了单一的状态变量，会导致所有父项共用同一个状态，接下来我给你一步步完善代码：

1. 组件类中维护每个父项的独立状态 #

从你用的(click)和动画绑定语法来看，这是Angular项目对吧？我们需要给每个父项单独存展开/折叠状态，而不是用一个通用的showlist变量：

export class YourComponent {
  // 用对象存储每个父项的状态，键可以是父项的唯一标识（比如文本内容）
  listExpandedStates: { [key: string]: boolean } = {
    'something1': false,
    'something4': false
  };

  // 切换指定父项的状态
  toggleSubList(parentKey: string) {
    this.listExpandedStates[parentKey] = !this.listExpandedStates[parentKey];
  }
}

2. 修改HTML，绑定对应父项的状态 #

把每个父项的点击事件和子列表动画状态都绑定到自己的专属状态上，顺便给图标加个状态切换的效果（展开时向下箭头，折叠时向右），用户体验会更好：

<li>
  <div>
    <span>something1</span>
    <i class="fa" 
       [ngClass]="listExpandedStates['something1'] ? 'fa-angle-down' : 'fa-angle-right'"
       (click)="toggleSubList('something1')"></i>
  </div>
  <!-- 根据当前父项的状态绑定动画 -->
  <ul [@elementState]="listExpandedStates['something1'] ? 'open' : 'closed'">
    <li>something2</li>
    <li>something3</li>
  </ul>
</li>
<li>
  <div>
    <span>something4</span>
    <i class="fa" 
       [ngClass]="listExpandedStates['something4'] ? 'fa-angle-down' : 'fa-angle-right'"
       (click)="toggleSubList('something4')"></i>
  </div>
  <ul [@elementState]="listExpandedStates['something4'] ? 'open' : 'closed'">
    <!-- 这里添加something4的子项 -->
    <li>something5</li>
    <li>something6</li>
  </ul>
</li>

3. 定义Angular动画效果 #

在组件里定义elementState动画，控制子列表的展开/折叠过渡，你可以根据自己的UI需求调整样式和时长：

import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  animations: [
    trigger('elementState', [
      // 折叠状态：高度为0，透明，隐藏溢出内容
      state('closed', style({
        height: '0',
        opacity: 0,
        overflow: 'hidden',
        margin: '0',
        padding: '0'
      })),
      // 展开状态：高度自适应，不透明
      state('open', style({
        height: '*',
        opacity: 1,
        overflow: 'visible',
        margin: '8px 0',
        paddingLeft: '16px'
      })),
      // 折叠<=>展开的过渡动画，300ms缓动
      transition('closed <=> open', animate('300ms ease-in-out'))
    ])
  ]
})

这样每个父项的点击操作只会影响自己的子列表，完全独立，动画效果也能正常触发啦！

内容的提问来源于stack exchange，提问作者Jake11