angular - 角度动画：过渡不起作用

Question

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

content.component.html

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

内容.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 毫秒内滑入。

标签： angularanimation