Angular / SCSS : animation not applied on element

Angular / SCSS : animation not applied on element

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?

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


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to CSS Centering for Angular

Centering elements in CSS either horizontally or vertically was always tricky and developers have used many methods which sometimes didn't even make sense particularly for beginners. But with the advent of Flexbox, CSS centering became easier and clearer than ever.

Using CSS Grid Layout in Angular project

This CSS Grid layout tutorial is designed for Angular 7/8 developers that want to learn how to build responsive layouts with modern CSS.

Sass Tutorial for Beginners - CSS With Superpowers

In this Sass tutorial for beginners, you will learn the basics of Sass. We will start with a brief overview of what Sass is along with what is required to incorporate Sass into your environment. We will also set up a Sass compiler in Visual Studio Code. You will learn about Sass variables, maps, nesting, functions, mixins, extending, and operations. Lastly, we will start from scratch on a real-world project (Portfolio website) using Sass. We will go step-by-step through each part, and at the end, we will deploy the site.