Angular中*ngFor循环内如何仅为单个图标添加CSS过渡动画

核心逻辑是将动画状态绑定到单个列表项维度，同时避免用*ngIf销毁重建图标元素导致过渡失效，具体实现如下：

1. 修改模板代码 #

合并原来两个通过*ngIf切换的图标为单个元素，动态绑定属性和状态，避免元素销毁重建丢失过渡上下文：

<div class="text-content" *ngFor="let user of items | async">
  <div class="user">
    <span>user</span>
    <p>{{user.some}}</p>
    <div class="comment-line"></div>
    <div class="comment">
      <i 
        class="material-icons favorite-icon"
        [class.animating]="user.isAnimating"
        [class.favorited]="user.hasOwnProperty(uid)"
        (click)="toggleFavorite(user)"
      >
        {{ user.hasOwnProperty(uid) ? 'favorite' : 'favorite_border' }}
      </i>
    </div>
  </div>
</div>

2. 补充组件逻辑 #

点击时仅给当前触发事件的user添加动画状态，等待动画执行完成后再切换点赞状态：

// 组件内已定义的变量示例：uid为当前用户id，items为列表数据源
toggleFavorite(user: any) {
  // 仅标记当前点击的user进入动画状态
  user.isAnimating = true;

  // 时长和CSS中定义的过渡时长保持一致
  setTimeout(() => {
    if (user.hasOwnProperty(this.uid)) {
      this.dislike(user.key, this.uid);
    } else {
      this.like(user.key, this.uid);
    }
    // 动画结束后清除状态，支持下次点击重新触发
    user.isAnimating = false;
  }, 300);
}

如果不想污染原始user数据，可以用Set单独存储正在动画的user key：

// 组件内新增变量
animatingKeys = new Set<string>();

toggleFavorite(user: any) {
  this.animatingKeys.add(user.key);
  setTimeout(() => {
    if (user.hasOwnProperty(this.uid)) {
      this.dislike(user.key, this.uid);
    } else {
      this.like(user.key, this.uid);
    }
    this.animatingKeys.delete(user.key);
  }, 300);
}

对应模板的动画状态判断改为：
[class.animating]="animatingKeys.has(user.key)"

3. 添加CSS过渡样式 #

.favorite-icon {
  cursor: pointer;
  /* 定义过渡属性和时长 */
  transition: all 0.3s ease;
  color: #999;
  transform: scale(1);
}

/* 已点赞的默认样式 */
.favorite-icon.favorited {
  color: #f44336;
}

/* 动画触发时的样式 */
.favorite-icon.animating {
  transform: scale(1.3);
  color: #f44336;
}

实现说明 #

• 所有状态都绑定到单个user维度，不会触发其他列表项的样式变更，自然不会带动其他图标动画
• 合并单个图标元素避免了*ngIf的销毁重建逻辑，保证过渡效果可以正常触发
• 可以根据需求自定义animating类的样式，比如修改透明度、旋转角度等，过渡效果都会仅作用于当前点击的图标

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