css - Angular/SCSS : animation not applied on element

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