Angular中点击列表项触发单个元素动画的优化方案咨询

不用给每个元素单独加布尔变量，这三个方案更适合动态列表场景：

方案1：用单个变量记录激活元素（最简洁） #

只需要在组件里维护一个变量，记录当前被点击的元素标识（比如ID、索引），模板里通过表达式绑定动画触发器的状态。

组件代码 #

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

@Component({
  selector: 'app-list-animation',
  animations: [
    trigger('openClose', [
      state('closed', style({ height: '20px', opacity: 1 })),
      state('open', style({ height: '100px', opacity: 0.8 })),
      transition('closed <=> open', animate('300ms ease-in-out')),
    ]),
  ],
  template: `
    <div *ngFor="let item of items" 
         [@openClose]="activeItemId === item.id ? 'open' : 'closed'"
         (click)="activeItemId = activeItemId === item.id ? null : item.id">
      {{ item.name }}
    </div>
  `,
})
export class ListAnimationComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];
  activeItemId: number | null = null;
}

点击元素时切换activeItemId的值，只有匹配ID的元素会触发动画状态切换，其他元素保持初始状态。如果需要点击同一元素来回切换动画，直接用三元表达式切换activeItemId即可。

方案2：通过ViewChildren直接控制动画播放器 #

如果需要更灵活的代码控制（比如手动触发、暂停、反向播放），可以用ViewChildren获取所有带动画触发器的元素，直接操作对应的动画播放器。

组件代码 #

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { trigger, state, style, transition, animate, AnimationTriggerRef, AnimationPlayer } from '@angular/animations';

@Component({
  selector: 'app-list-animation',
  animations: [
    trigger('openClose', [
      state('closed', style({ height: '20px', opacity: 1 })),
      state('open', style({ height: '100px', opacity: 0.8 })),
      transition('closed <=> open', animate('300ms ease-in-out')),
    ]),
  ],
  template: `
    <div *ngFor="let item of items; let i = index" 
         #listItem
         [@openClose]="'closed'"
         (click)="toggleAnimation(i)">
      {{ item.name }}
    </div>
  `,
})
export class ListAnimationComponent implements AfterViewInit {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];
  
  @ViewChildren('listItem', { read: AnimationTriggerRef }) animationTriggers!: QueryList<AnimationTriggerRef>;
  private players: AnimationPlayer[] = [];

  ngAfterViewInit() {
    // 初始化每个元素的动画播放器
    this.animationTriggers.forEach(trigger => {
      const player = trigger.createPlayer('closed');
      this.players.push(player);
    });
  }

  toggleAnimation(index: number) {
    const player = this.players[index];
    if (!player) return;
    
    if (player.hasStarted() && !player.finished) {
      player.reset();
    } else {
      // 根据当前状态切换动画方向
      const targetState = player.getState() === 'closed' ? 'open' : 'closed';
      player.setState(targetState);
      player.play();
    }
  }
}

这种方式完全通过代码控制动画生命周期，适合需要自定义动画逻辑的场景，比如批量控制、结合其他事件触发动画。

方案3：给数据项绑定状态属性 #

直接给每个列表项的数据对象添加状态属性，点击时切换该属性，动画触发器绑定到这个属性值。

组件代码 #

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

@Component({
  selector: 'app-list-animation',
  animations: [
    trigger('openClose', [
      state('false', style({ height: '20px', opacity: 1 })),
      state('true', style({ height: '100px', opacity: 0.8 })),
      transition('false <=> true', animate('300ms ease-in-out')),
    ]),
  ],
  template: `
    <div *ngFor="let item of items" 
         [@openClose]="item.isOpen"
         (click)="item.isOpen = !item.isOpen">
      {{ item.name }}
    </div>
  `,
})
export class ListAnimationComponent {
  items = [
    { id: 1, name: 'Item 1', isOpen: false },
    { id: 2, name: 'Item 2', isOpen: false },
    { id: 3, name: 'Item 3', isOpen: false }
  ];

  // 动态添加项时自动带上状态属性
  addNewItem() {
    const newId = this.items.length + 1;
    this.items.push({ id: newId, name: `Item ${newId}`, isOpen: false });
  }
}

这个方案把状态和数据项绑定在一起，比单独维护多个零散的布尔变量更整洁，动态生成列表时也完全适用，新增的项会自动带上状态属性。

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