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