Angular / SCSS：未在元素上应用动画

Question

我有一个帖子组件，这个帖子组件有一个评论部分。当我点击评论时，我想显示用户的评论。我能够显示这些评论，但我想添加一个漂亮的动画，以便在打开和关闭之间进行平滑过渡。不幸的是，动画没有得到应用。谁能告诉我哪里出错了？

这就是它的样子。我单击注释文本然后显示注释。现在它打开时没有动画，尽管我在下面添加了代码。

模板代码：我在类中添加了索引，以确保获得良好的交错效果

<div #normalComments *ngIf="commentsDisplayed && comments">
    <ng-container *ngFor="let comment of comments; let i = index">
        <post-comment
          class="comment-{{i}}"
          [user]="user"
          [comment]="comment"
          [allMembersId]="allMembersId"
          (sendDeletedComment)="deleteComment($event)">
        </post-comment>
    </ng-container>

</div>

SCSS代码：我将动画添加到以comment-开头的每个类中，动画延迟取决于元素的索引号

[class^="comment-"] {
  animation-name: fadeIn;
  animation-duration: 1s;
}

.comment {
  &-0 {
    animation-delay: 1s;
  }

  &-1 {
    animation-delay: 2s;
  }

  &-2 {
    animation-delay: 3s;
  }

  &-3 {
    animation-delay: 4s;
  }

  &-4 {
    animation-delay: 5s;
  }
}

@keyframes fadeIn {
  from {opacity: 0}
  to {opacity: 1}
}

Answer 1

将此代码用于评论类动画

  @for $i from 0 through 4 {
     .comment-#{$i} {
         animation-name: fadeIn;
         animation-duration: 1s;
         animation-delay: $i+1s;
        }
    }

不确定的

[class^="comment-"] {
  animation-name: fadeIn;
  animation-duration: 1s;
}
.comment {
  &-0 {
    animation-delay: 1s;
  }

  &-1 {
    animation-delay: 2s;
  }

  &-2 {
    animation-delay: 3s;
  }

  &-3 {
    animation-delay: 4s;
  }

  &-4 {
    animation-delay: 5s;
  }
}