Menu: animation open/close-CodePudding

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 >
   <!-- Top Menu -->
   <div >
      <!-- Menu Item -->
      <ul>
         <li
         *ngFor="let menu of menus; let i = index"
         [class.active]="menu.active"
         >
         <ng-container>
            <a  (click)="selectMenu(menu)">
            <i [class]="menu.iconClass"></i> {{ menu.name }}
            <i ></i>
            </a>
            <ul *ngIf="menu.active">
               <li *ngFor="let submenu of menu.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.

CodePudding user response：

I think you should change app.component.ts like this.

  selectMenu(parentMenu: { name: string, active:boolean }): void {
    this.menus.forEach((menu) => {
      if (menu.name === parentMenu.name) {
        menu.active = !menu.active;
      }
    });
  }
}

because Each time active is pressed, the boolean value should change. have a nice day:)

CodePudding user response：

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" >
           {{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