角度动画：过渡无效

Question

我正在尝试制作动画，当在标题中单击图像时，导航栏将从左侧滑入。一切似乎都工作正常，当我单击图像时，导航栏消失了，消失了，除了过渡。

content.component.html

<app-nav [@slideMenu]="isVisible ? true : false" [hidden]="!isVisible"></app-nav>
<app-main></app-main>

content.component.ts

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css'],
  animations: [
    trigger('slideMenu', [
      state('false', style({
        transform: 'translateX(-350px)'
      })),
      state('true', style({
        transform: 'translateX(0)'
      })),
      transition('true <=> false', animate('500s ease-in-out'))
    ])
  ]
})

我希望导航栏在这500毫秒内滑动。