Angular / SCSS：动画未应用于元素

Question

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

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

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

<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;
  }
}