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 css sass

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

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.

When Sass and New CSS Features Collide | CSS-Tricks

CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways.