Angular如何仅为新添加的评论添加fadeInDown动画效果

问题根源 #

1. 现有动画绑定逻辑错误：[ngClass]="{'fadeInDown': i}里的i是*ngFor导出的first标记，仅第一条评论会被加类，完全不匹配「仅新评论触发动画」的需求
2. *ngFor未配置trackBy规则，每次调用updateComments()全量替换评论数组时，Angular会销毁重建所有评论组件，导致所有元素重新触发动画
3. 没有区分「首次加载/编辑/删除触发的列表刷新」和「新评论发布触发的列表刷新」，所有渲染场景都套用了动画规则

修复步骤 #

1. 调整评论区组件逻辑，新增新评论追踪能力

修改CommentSectionComponent的TS代码：

export class CommentSectionComponent implements OnInit, OnDestroy {
  @Input() requestId: string
  comments: CommentDetailsDto[]
  commentsCount = 0
  // 存储所有已加载过的评论ID，用于识别新增评论
  private existingCommentIds = new Set<string>()
  // 存储需要播放入场动画的评论ID
  animateCommentIds = new Set<string>()
  private subscription: Subscription

  constructor(
      private commentsService: CommentsService,
      private alert: AlertService
  ) {}

  ngOnInit(): void {
    // 首次加载不触发新评论动画
    this.updateComments()
  }

  ngOnDestroy(): void {
    this.unsubscribe()
  }

  // 新增trackBy规则，避免已有评论组件被销毁重建
  trackCommentById(index: number, comment: CommentDetailsDto): string {
    return comment.id
  }

  updateComments(isNewCommentPosted = false): void {
    this.unsubscribe()
    this.subscription = this.commentsService.getComments(this.requestId)
      .subscribe({
        next: (comments: CommentDetailsDto[]) => {
          const reversedComments = comments.reverse()
          if (isNewCommentPosted) {
            // 新评论发布场景：递归遍历找出所有未记录的新评论，加动画标记
            const collectNewComments = (list: CommentDetailsDto[]) => {
              list.forEach(comment => {
                if (!this.existingCommentIds.has(comment.id)) {
                  this.animateCommentIds.add(comment.id)
                  this.existingCommentIds.add(comment.id)
                }
                if (comment.replies?.length) collectNewComments(comment.replies)
              })
            }
            collectNewComments(reversedComments)
          } else {
            // 首次加载/编辑/删除场景：全量记录已有评论ID，不触发动画
            const collectAllIds = (list: CommentDetailsDto[]) => {
              list.forEach(comment => {
                this.existingCommentIds.add(comment.id)
                if (comment.replies?.length) collectAllIds(comment.replies)
              })
            }
            collectAllIds(reversedComments)
          }
          this.comments = reversedComments
          this.commentsCount = this.getCommentsCount(comments)
        },
        error: (error: HttpErrorResponse) => {
          this.alert.handleHttpError(error)
        }
      })
  }

  // 动画播放完成后移除标记，避免重复触发
  onCommentAnimated(commentId: string): void {
    this.animateCommentIds.delete(commentId)
  }

  private getCommentsCount(comments: CommentDetailsDto[]): number {
    return comments.reduce(
      (cnt, comment) => cnt + 1 + (comment.replies ? this.getCommentsCount(comment.replies) : 0),
      0
    )
  }

  private unsubscribe(): void {
    if (this.subscription instanceof Subscription) {
      this.subscription.unsubscribe()
    }
  }
}

2. 修改评论区组件模板

调整事件绑定、ngClass规则、trackBy规则，新增嵌套评论需要的输入传参：

<h6>Comments: ({{commentsCount}})</h6>
<!-- 新评论提交后的刷新标记为需要识别新评论 -->
<app-new-comment class="d-block mt-3" [requestId]="requestId" (update)="updateComments(true)"> 
</app-new-comment>
<app-comment *ngFor="let comment of comments; trackBy: trackCommentById"
         class="d-block mt-3 animated"
         [ngClass]="{'fadeInDown': animateCommentIds.has(comment.id)}"
         [comment]="comment"
         [animateCommentIds]="animateCommentIds"
         (animationDone)="onCommentAnimated(comment.id)"
         (update)="updateComments()"></app-comment>

3. 调整评论项组件，支持嵌套评论动画

首先修改CommentComponent的TS代码，新增输入、输出和辅助方法，同时修复直接修改输入属性原数组的副作用：

export class CommentComponent implements OnInit {
  @ViewChild('textarea', {static: true}) textarea: ElementRef<HTMLTextAreaElement>
  @Input() comment: CommentDetailsDto
  @Input() animateCommentIds: Set<string>
  @Output() update = new EventEmitter()
  @Output() animationDone = new EventEmitter<string>()

  edit = false
  showReplyButton = false
  showNewReplyWindow = false
  showMoreReplies = false
  commentContent: string
  firstReply: CommentDetailsDto
  moreReplies: CommentDetailsDto[]

  constructor(
      private commentsService: CommentsService,
      private modalFactoryService: ModalFactoryService,
      public hateoas: HateoasService,
      private alert: AlertService
  ) {}

  ngOnInit(): void {
    this.commentContent = this.comment.content
    this.showReplyButton = this.hateoas.supports(this.comment, 'reply')
    // 拷贝数组后再反转，不直接修改输入属性的原对象
    const reversedReplies = this.comment.replies ? [...this.comment.replies].reverse() : []
    this.moreReplies = reversedReplies.slice(1)
    this.firstReply = reversedReplies[0]
  }

  trackReplyById(index: number, reply: CommentDetailsDto): string {
    return reply.id
  }

  // 子评论动画播放完成后移除标记
  onSubCommentAnimated(replyId: string): void {
    this.animateCommentIds.delete(replyId)
  }

  // 监听动画结束，仅fadeInDown动画触发完成事件
  onAnimationEnd(event: AnimationEvent) {
    if (event.animationName === 'fadeInDown') {
      this.animationDone.emit(this.comment.id)
    }
  }

  // 其余原有方法（toggleEdit、updateComment等）保持不变
}

然后修改评论项组件模板，给最外层评论容器绑定动画结束事件，给嵌套的回复组件添加动画规则、传参、事件绑定：

<!-- 最外层容器绑定动画结束事件 -->
<div class="comment" (animationend)="onAnimationEnd($event)">
  <app-user-image></app-user-image>
  <div class="position-relative d-inline-block flex-fill">
    <!-- 原有评论内容、操作按钮、编辑区代码保持不变 -->
  </div>
</div>
<div *ngIf="edit" class="animated fadeIn text-right mt-3">
  <button class="btn btn-sm discard" (click)="cancelEdit()">Discard</button>
  <button class="btn btn-sm ml-2 update" (click)="updateComment()">Update</button>
</div>
<div class="replies">
  <app-new-comment *ngIf="showNewReplyWindow"
              class="d-block mt-3"
              [comment]="comment"
              (update)="this.update.emit()"></app-new-comment>
  <!-- 第一条回复添加动画规则 -->
  <app-comment *ngIf="firstReply"
           class="d-block my-3 animated"
           [ngClass]="{'fadeInDown': animateCommentIds.has(firstReply.id)}"
           [comment]="firstReply"
           [animateCommentIds]="animateCommentIds"
           (animationDone)="onSubCommentAnimated(firstReply.id)"
           (update)="update.emit()"></app-comment>
  <div *ngIf="moreReplies.length" class="replies-toggle" (click)="showMoreReplies = !showMoreReplies">
    <div class="horizontal-bar"></div>
    <span class="mx-3">{{showMoreReplies ? 'Hide' : 'See'}} {{moreReplies.length}} more comments</span>
    <div class="horizontal-bar"></div>
  </div>
  <div *ngIf="showMoreReplies">
    <!-- 更多回复添加trackBy和动画规则 -->
    <app-comment *ngFor="let reply of moreReplies; trackBy: trackReplyById"
                 class="d-block my-3 animated"
                 [ngClass]="{'fadeInDown': animateCommentIds.has(reply.id)}"
                 [comment]="reply"
                 [animateCommentIds]="animateCommentIds"
                 (animationDone)="onSubCommentAnimated(reply.id)"
                 (update)="update.emit()"></app-comment>
  </div>
  <span id="temporaryLastRow"></span>
</div>

4. 补全动画样式

修改SCSS文件，给animated类加基础动画配置，调整动画幅度更符合评论区交互：

.animated {
  animation-duration: 0.4s;
  animation-fill-mode: both;
}

@keyframes fadeInDown {
from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
}
to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
}

.fadeInDown {
    animation-name: fadeInDown;
}

最终效果 #

• 页面首次加载、编辑/删除评论触发列表刷新时，所有已有评论不会播放入场动画
• 只有用户新发布的顶级评论、新提交的回复会触发fadeInDown动画
• trackBy规则保证已有评论组件不会被销毁重建，完全不影响编辑、回复、删除等现有业务功能
• 动画播放完成后自动移除标记，不会出现重复触发动画的问题

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