I have created a post component with a comment section. However, when I click on the comments, I want them to display smoothly with a nice animation effect. Even though I have added the necessary code for animations, it doesn't seem to work as expected. Can someone please help me identify the issue?
Currently, when I click on the comments text, the comments section opens without any animations, despite the setup below.
https://i.stack.imgur.com/IsjL1.png
Here is part of the template code where I tried to implement staggered animation effects:
<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>
Additionally, here is a portion of the SCSS code that defines the animation properties based on the element's index number:
[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}
}