Menu: animation open/close

Issue

When I open and close a menu item, there is no animation. I would like to know how to create an animation, please?

HTML file

<div class="wrapper">
   <!-- Top Menu -->
   <div class="sidebar">
      <!-- Menu Item -->
      <ul>
         <li
         *ngFor="let menu of menus; let i = index"
         [class.active]="menu.active"
         >
         <ng-container>
            <a class="item" (click)="selectMenu(menu)">
            <i [class]="menu.iconClass"></i> {{ menu.name }}
            <i class="fa fa-chevron-down"></i>
            </a>
            <ul *ngIf="menu.active">
               <li *ngFor="let submenu of menu.submenu" class="submenu">{{submenu.name}}</li>
            </ul>
         </ng-container>
         </li>
      </ul>
   </div>
</div>

I don't know if it's possible to do it in Angular or CSS? I made you a reproduction of the project => Stackblitz.

Solution

the easer is using Angular animations. add this animation to your component

animations:[
    trigger('accordion', [
      transition(':enter', [
        style({ height: 0 }),
        animate('1000ms', style({ "height": '*' })),
      ]),
      transition(':leave', [
        animate('100ms', style({ "height": 0 }))
      ])
    ]),
  ]

See that, when "enter" start with style:height=0 and animate to reach style:height=* (the * main that reach the "normal" height) and you use "leave" to animate and change the style to "height=0".

Then just use

      <ul @accordion *ngIf="menu.active">
        <li *ngFor="let submenu of menu.submenu" class="submenu">
           {{submenu.name}}
        </li>
      </ul>

NOTE1: don't forget import the BrowserAnimationsModule in your module

NOTE2: You need add to your .css

.wrapper ul li ul{
  overflow:hidden;
}

Your forked stackblitz

Answered By - Eliseo