Angular / SCSS : animation not applied on element - css

Question

I have a post component and this post component has a comment section. When I click comments I want to show the comments of users. I am able to show these comments, but I wanted to add a nice looking animation to make the transition between open and closed smoother. Unfortunately the animation doesn't get applied. Can someone tell me where I went wrong?
This is what it looks like. I click the comments text and then it displays the comments. Right now it opens without animations, despite the code I added below.
template code: I added the index to the class to make sure I get a nice stagger effect
<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 code: I add the animation to every class that starts with comment- and the animation-delay depends on the index number of the element
[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

use this code for your comment class animation
#for $i from 0 through 4 {
.comment-#{$i} {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: $i+1s;
}
}
indetead of
[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;
}
}