使用 Angular 动画滑入和滑出组件

Question

使用 Angular 6 和 @angular/animations 模块，我正在尝试实现一个自定义的 sidenav 元素，该元素必须通过单击按钮从主页顺利滑入和滑出。

如您所见here这个元素平滑地隐藏到左侧，但不是向左隐藏，它只是消失了。

这是动画代码：

animations: [
    trigger('slideMenu', [
      state('false', style({
        transform: 'translateX(-250px)'
      })),
      state('true', style({
        transform: 'translateX(0)'
      })),
      transition('true <=> false', animate('400ms ease-in-out'))
    ])
  ]

完整项目可见https://stackblitz.com/edit/slide-demo。

如何让组件正确地向两个方向滑动？

编辑
相关 html 使用组件：

<app-home-sidenav [@slideMenu]="isVisible ? true : false" [hidden]="!isVisible"></app-home-sidenav>  
  <div class="home-content">
    <div class="home-label">
      <span>This content should expand upon hiding sidenav</span>
    </div>
    <button (click)="onToggle()">
    Toggle Sidenav
  </button>
</div>

Answer 1

发生这种情况是因为您在组件中使用了 [hidden]="!isVisible"，该组件的评估没有任何延迟，并在动画之前隐藏了侧边栏。
如果您删除 [hidden] 属性并像这样设置您的 'false' 状态，它将以正确的方式为您提供帮助：

state('false', style({
    transform: 'translateX(-250px)',
    display: 'none'
}))

但据我所知，如果您希望主要内容与边栏一起展开，您将需要另一个动画。

使用 Angular 动画滑入和滑出组件

Slide in and out a component with Angular animations

angular

angular-animations