切换动画时的角度显示菜单淡入淡出？

Question

<section id="mobile-menu" *ngIf="showMobileMenu" [@enterAnimation]>
  <mat-icon  (click)="toggleMenu()">close</mat-icon>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>С</li>
  </ul>
</section>

<section class="header">
  <div class="container">
    <div id="logo">
      <span>LOGO</span>
    </div>
    <div id="header-menu">
      <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>

    <mat-icon (click)="toggleMenu()" *ngIf="!showMobileMenu">menu</mat-icon>
  </div>
</section>

我有一个响应标题，当在较小的屏幕上访问时，菜单变成菜单图标。

现在，当我单击菜单图标时，它在showMobileMenu中显示true/false。

启用后，#mobile-menu应该淡入，禁用时#mobile-menu应该淡出。

我尝试用此动画创建它，但是它什么也没做：

  animations: [
    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({opacity: 0}),
          animate('500ms', style({opacity: 1}))
        ]),
        transition(':leave', [
          style({opacity: 1}),
          animate('500ms', style({opacity: 0}))
        ])
      ]
    )
  ],